Ok, a really quick question - which is the best way out of these to apply css styles:
1 - Use lots of different classes that apply different parts of the style i.e. class='font-1 red-bkg border-1' etc etc.
Or
2 - Style up individual parts of the site seperately
What you should do for font for example is to apple it to body, same for background colour, font colour etc...
body{font: Verdana 38px; color: #000; background: #fff;}
Then for individual features (e.g. margins, padding, borders etc) they should be defined in a per-class way.
.classname {
margin: 0px 5px 10px 5px;
padding: 10px 5px 10px 6px;
}
It is better for maintainability and makes your HTML less messy.
I believe to justify shared classes you should have more than one property in it, otherwise you are not gaining anything from using CSS's modularity.
I.e. things like this are not good ideas:
.bold { font-weight: bold; }
Style up individual parts of the site seperately. The other solution would kind of screw the intention behind it - separating content from styling.
Seems like you will enjoy this read, I certainly did:
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
You should name logically classes, because when you change your layout and currently you have style like
.bold .5px-brd .red.bg
then changing this to another colour and style will include grep'ing through entire application code in order to correct css styles.
As you may notice approach like
.bold .5px-brd .red.bg
it's good, and don't go with philosophy of CSS.
Classes with name like
.bold
should be used as auxiliary style. Never as basic construction block.
http://jsfiddle.net/sheriffderek/RMfEn/
html
<section class='container blocks'>
<h2>Blocks of content</h2>
<div class='block highlight-theme'>
<p>None of the styling should be done in the html.</p>
</div>
<div class='block base-theme'>
<p>You can use modular classes to style common pieces of the layout and then modify them with more specific classes.</p>
</div>
<div class='block contrast-theme'>
<p>So the stuff in this box could be a dark-theme with .contrast-theme or something</p>
</div>
</section>
css
.container, .block { /* structural elements */
width: 100%;
float; left;
padding: .5rem;
overflow: hidden; /* use a clear-fix instead */
}
/* mini themes /// mix and match */
.base-theme {
background: lightgray;
color: black;
}
.highlight-theme {
background: yellow;
color: red;
}
.contrast-theme {
background: gray;
color: white;
}
Related
I enjoy using css custom properties, but there's this thing that I often find that I wish I could do.
I wish to be able to apply some styles conditionally based on the value of a css custom property. Here's some pseudo-code:
.something {
border: var(--is-dark-theme) ? 1px solid : none;
}
I understand that custom properties do not work like this. But may be there is some other way that I'm not aware of that could help me achieve a similar result?
Or perhaps there is some spec proposal that would this possible in the future?
Here is another idea similar to Ori Drori answer where I rely on the use of an invalid value inside border to remove the border. This can be useful in case you want to use keywords like false/true/yes/no
.something {
border: var(--is-dark-theme,2px) solid black;
}
<div class="something">Dark theme</div>
<div class="something" style="--is-dark-theme: false">Light theme</div>
You can sometimes use calc() to get roughly similar results. In this case if --is-dark-theme is 0 or 1, you can multiply it by the width of border, to show or hide it:
.something {
border: calc(var(--is-dark-theme) * 1px) solid black;
}
<div class="something" style="--is-dark-theme: 1">Dark theme</div>
<div class="something" style="--is-dark-theme: 0">Light theme</div>
In cases where you have something like "condition xyz is on or off" (like in the light theme vs dark theme example) you can use the following CSS trick (I know this looks completely weird if you see this trick for the first time, but in contrast to the tricks presented in the other answers, this one will work for all CSS properties):
For each on/off condition define two custom properties, one for the 'on' case, one for the 'off' case. Instead of on use the value initial, instead of off use value (space character).
.light-theme {
--is-light-theme: initial;
--is-dark-theme: ;
}
.dark-theme {
--is-light-theme: ;
--is-dark-theme: initial;
}
div {
font-family: Helvetica, Arial, sans-serif;
padding: 1rem;
color:
var(--is-light-theme, black)
var(--is-dark-theme, white);
background-color:
var(--is-light-theme, white)
var(--is-dark-theme, black);
border:
var(--is-light-theme, none)
var(--is-dark-theme, 5px solid #aaa);
}
<div class="light-theme">
light theme
</div>
<div class="dark-theme">
dark theme
</div>
Just FYI: The following is not working today (2023-02-06), but someday in future there might be this very nice CSS feature called "CSS style container queries":
/* not working today (2023-02-06), maybe in future */
#container style(--theme: dark) {
.box {
border: 1px solid #aaa;
}
}
I have a question about CSS, i don't know how to removestyles of a class with an inline CSS code.
Let me explain more,
I have a CSS file named styles.css
In this file for example my h2 has some styles, now in my article i want to use h2 but i want to remove h2's default styles(written in styles.css) for this heading.
I guess there should be a way for this case, but i don't know how?
Please tell me this css code and teach me something new.
Thanks
Edit:
Please take a look to bellow picture. As you can see this h2 has some styles, can you see the pink vertical line in right side?
Now i want to remove this h2's styles with a css code. I guess something like my heading here should exist in CSS3. Am i right? Is there any css code for removing external css styles with an inline css code?
https://preview.ibb.co/m4BLda/Screenshot_2017_09_04_01_44_09_1.png
Here is the code:
h2 {
border-right: 4px solid #E20070;
font-size: 22px;
margin: 1.5em 0;
padding-right: 1em;
font-family: "Yekan",'irans',tahoma;
font-weight: normal !important;
}
You said inline, but you should really keep your styles in a separate stylesheet file. Now, in your styles.css file add your own class:
/* styles.css */
h2 {
font-size: 18px;
}
.my-other-title {
color: red;
border-right: 0;
}
<h2>My title</h2>
<h2 class="my-other-title">My other title</h2>
Why does this even work? Because of CSS specificity:
Specificity determines, which CSS rule is applied by the browsers
Take your time learning more by reading this article
Remove the existing class for your heading if there is and use your own custom class instead of writing everything inline.
h1{
font-size:15px;
color:blue;
}
/* target your h1 element */
.custom-css{
font-size:25px;
color:red;
}
<h1>Heading with general css<h1>
<h1 class="custom-css">Heading with custom css</h1>
Although its not good to change the semantic of an HTML Element.
CSS - Default for h2 (from external css source)
h2 {
border-right: 4px solid #E20070;
font-size: 22px;
margin: 1.5em 0;
padding-right: 1em;
font-family: "Yekan",'irans',tahoma;
font-weight: normal !important;
}
You want to override the default css through inline css. Try using below code for your h2.
<h2 style="border-right: 0px; padding: 0; margin: 0;"> Hello </h2>
You can also add a class to the h2 and call the class to your stylesheet if this style is applied to most of the h2 tags. Try to avoid inline css if possible, it may cause loading time.
<h2 style="color:white; font-size:80px"> My Cool Text </h2>
You have to write what you want to replace, for example, I changed color here.
Question: Is the second OOCSS principle really valid?
According to the OOCSS second principle you're not supposed to have location dependent styles:
Quote from https://github.com/stubbornella/oocss/wiki
Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific h2 with .myObject h2 {...}, create and apply a class that describes the h2 in question, like h2 class="category".
Lets take a practical example of this. Say I have a standard 2.0 setup with a normal body (white background) and a huge footer (black background). In the body we have black links and in the footer of course we need white. Isn't the simplest and most intuitive way to achieve this simply to:
a{ color: #000; }
.footer a{ color: #FFF; }
If I where to follow OOCSS principles I'd have to first create a class:
.inverted{ color: #FFF; }
Then proceed to add that class to every link I want inverted. That seems like a hassle.
Isn't the purpose of the whole language that styles are made to Cascade?
Am I misunderstanding something here?
I think you are right in the sense that yes, in your specific example.. perhaps doing it your way would be easier. But then again, if you look at the first sentence in the OOCSS page:
How do you scale CSS for thousands of pages?
In that context.. the second principle makes perfect sense.. so using your same example (ie let's assume we implemented your solution).. let's say that a year down the road your company decides to create light grey buttons in the black footer having black text:
<!-- inside footer -->
<a class="button lightGrey">link</a>
in this case.. all the a tags will be white because they're covered by your cascading. So then we will have to go create another sytle just to undo what your solution did:
.footer a.button.lightGrey {
color: #000; /* huh? but i thought we did this before with a {color: #000;} ?*/
}
where as if we simply made a decision that all a tags by default are black (see last note):
a{ color: #000; }
then in the footer we will create a special type of link that are supposed to be white:
.footerLinks { color: #FFF }
then a year later some of the links are still white.. others within the greyLight button will be black:
<a class="button lightGrey">link</a>
then here we don't have to worry about undoing anything.. a tags have a default color.. and that's it. if 2 years later someone decides that the links inside the lightGrey buttons (anywhere on the site, not only withen the footer.. which is the whole point of OOCSS) should be red.. then this would be the OOCSS approach:
.redLink {
color: red;
}
and the html will be
<a class="button lightGrey redLink">link</a>
in this case it won't matter if we take out the .lightGrey class, or we can have this code within or not within a footer .. it's all the same.. it results in more predictable and re-usable code.. which is OOCSS (I'm very glad that they're finally formalising this.. thanks a lot for the post btw).
One last note: To be pure OOCSS, one shouldn't change the default color of a ie a {color: #000;} is wrong!, it should be left to it's default color (which is blue).. whenever anyone wants to change that color.. then they must specify it ie
<a class="redLink">..</a>
so in this case it's more like the default a is the parent class.. and everything else subclasses it and overrides its default behaviour..
update - response to comments:
reputable site argument:
such initiatives are almost always driven by the community then adopted by reputable companies.. and even when they are adopted by larger companies it usually happens from the bottom up through enthusiastic developers who advocate for such change.. I for one was such an advocate when I was working in Amazon. And even when it's adopted.. it's usually at a small scale and not across all units in the org. it wouldn't even be a good idea for the Googles and the Amazons and the facebooks etc to enforce such a rule b/c there will always be a difference of opinion.. not to mention that such micromanagement would constrain the engineer's creativity.. there could be a guideline in a wiki for a team (ie we had one for the Amazon Kindle Touch app store) but to enforce that rule across 10,000 engineers working across the company wouldn't be practical nor desirable.
So in short if you see value in OOCSS, and start implementing on your site, and advocating it to your fellow web devs, and then it becomes a trend, that's when it eventually becomes an industry wide best practice and that's when you can expect to see it on facebook etc.
example:
take a look at this:
simple: http://jsfiddle.net/64sBg/
a bit more detailed: http://jsfiddle.net/64sBg/2/
without going too much detail (I'm sure you will see the pattern) you can see that the granularity in css descriptions allows for subtle changes without any redundancy in style definition. So notice the left arrow vs right arrow.. also the .red and .blue styles can be subsequently applied to tables etc..
also notice that there isn't a single cascading in my css.. so my styles can be completely independently applied (ie implementing the rule An object should look the same no matter where you put it)
lastly.. there is still use for cascading.. you can definitely use it in your jQuery selectors for example.. also cascading happens by default (ie without you having to explicitly set it in your css styles).. so if you take look at the css below.. you will notice that the font properties of body has cascaded down to all the buttons.
<a class="button blue dark">
<div class=" arrowDownWhite rightArrow">Analytics</div>
</a>
<a class="button red dark">
<div class=" arrowDownWhite leftArrow">Actions</div>
</a>
<a class="button grey light">
<div class=" arrowDownRed leftArrow">options</div>
</a>
and css:
body
{
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 15pt;
}
.button
{
padding: .5em 1em;
display: inline-block;
text-decoration: none;
}
.dark {
color: white;
}
.light{
color: #E40E62;
}
.blue
{
background-color: #51C8E8;
}
.red
{
background-color: #E40E62;
}
.grey
{
background-color: #E0E0E0 ;
}
.arrowDownWhite
{
background-image:url(http://s2.postimage.org/ywam7ec4l/small_Arrow_Down_White.png);
background-repeat:no-repeat;
}
.arrowDownRed
{
background-image:url(http://s2.postimage.org/je5743t2d/small_Arrow_Down_Red.png);
background-repeat:no-repeat;
}
.leftArrow
{
padding-left: 1em;
background-position: left center;
}
.rightArrow
{
padding-right: 1em;
background-position: right center;
}
It is worth the hassle of separating your skin from the container.
Lets look beyond colors. I wish Nicole Sullivan provided better examples than she does. I have 23 web sites that an contain
Menus
Tabs
Toolbars
Horizontal and Vertical Lists of Links
All of them are Skins of the Nav abstraction
I started off created an abstraction class to handle the common code between all of them. I added a few modifiers to change the orientation from horizontal to vertical, and also the floated position of it. I kept all colors out of the abstraction as well as css rules that can change based on the skin I apply to it.
/* Object */
.nav
{
margin-bottom: 1.5em; margin-left: 0; padding-left: 0; list-style: none;
}
/* Modifier */
.nav--stack .nav__item
{
display: block;
}
.nav--right
{
float: right;
}
/* Elements */
.nav__item
{
float:left
}
.nav__item__link
{
display:none;
}
Menu Skin
I needed a skin that made the .nav abstraction look like a sidebar menu. In case you are wondering, I did not put the padding for .nav_item_link above is because it can change based on the skin. The tabs skin has it set for 2px.
/* Object */
.menu
{
}
/* Elements */
.menu .nav__item--current.nav__item__link
{
color: #fff; background: blue;
}
.menu .nav__item__link
{
padding: 4px; border-radius: 4px;
}
.menu .nav__item__link:hover
{
background: #eee
}
Notice to keep things location-independent - I have 0 tag names. I don't style li and a children on .nav like bootstrap does. This code could be used on dls or even divs and has better performance based on how selector engines read rules.
To me the benefit of just having to skin the objects I have for all 23 sites I have is worth any hassle.
I have this div as part of an include fine:
.connier {
text-align: left;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
background-color:#CCC;
}
and use it thus:
<div id="connier">
<!--#include virtual="/cover/cover.asp" -->
</div>
But I would like to use same include file on another page but this time, with transparent background but it is still rendering same background.
Here is what I attempted
.connier.the_otherbg {
text-align: left;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
background-color:transparent;
}
<div class="the_otherbg">
<!--#include virtual="/cover/rents.asp" -->
</div>
what am I doing wrong?
Thanks a lot in advance
Change your CSS to this:
.the_otherbg {
background-color:transparent;
}
Making sure that it is defined after .connier. You also need to make sure your div has both classes:
<div class="connier the_otherbg">
<!--#include virtual="/cover/rents.asp" -->
</div>
I would do it this way so that the the_otherbg div inherits any changes to connier. Only define what is different between them. In the future, when you need to change something, you will only need to do it in one place.
Demo: http://jsfiddle.net/CF88G/
I think all you should do is this:
.connier {
text-align: left;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
background-color:#CCC;
}
.transparent
{
background-color: transparent!important;
}
Remember we are working with CASCADING style sheets (CSS), so it is important that the transparent class is found UNDER the other class, if not, use the '!important' (this should not be used frequently though!).
Also note that the 'class=' attribute is used in div. To bind some css to a div using the 'id', then the class should be like '#myDivId' (in my opinion this is less usable)
For your normal div use:
<div class="connier"></div>
and for your other div use: (the div will have two classes at the same time)
<div class="connier transparent"></div>
This way you can make your css much more usable and maintainable.
Hope this cleared it up a bit
Well I'd love to know how the first one works if you're using a class selector to target a div that is marked by its ID, but never mind that.
The second selector is targeting elements that have both the classes connier and the_otherbg, whereas the element you want to target only has the_otherbg. Try just removing the .connier from the selector.
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}