CSS Standards - Part 3

[Alex]

CSS has to be used safely and wisely

Let's always make sure that CSS is enhancing and styling the document rather than being mandatory for the document to make sense.

Do not simulate markup via CSS
One of the biggest mistakes web developers did and do since CSS was introduced is to use it to design HTML elements to look and work like other elements.

wrong:
<div class="headline">Our new products</div>
<div class="subheadline">Product 1</div>
<p>...</p>
<div class="divider"> </div>
<div class="subheadline">Product 2</div>
<p>...</p>
right
<h1>Our new products</h1>
<h2>Product 1</h2>
<p>...</p>
<hr />
<p>...</p>

Also let's make sure that our CSS provides fall back options, should some of the needed assets not be available:

Generic font families must be the last option: Arial, Helvetica, Verdana, Sans-Serif.
Every foreground colour must be accompanied by a background colour.
Margin, padding and floats should only be applied to browsers that support it (Netscape 4 could render a page unusable).
Inline elements do not have a width, no matter how IE might display it.
Layouts must be tested on various browser with different box models.
If possible, the used doctype should enforce standards mode.
Background images must have a colour equivalent following the url() definition.
If we define pseudo classes for links, then we should define all states, in the order link, visited, hover and active.

Specificity
One common question is "if there are conflicting rules, which style takes precendence?" Here the rules of specificity apply. Consider the following example:

.spec {color: purple;}
H1 {color: red;}
<h1 class="spec">Specificity Demo</h1>

Will the H1 be red because all H1ss are marked as red, or purple because of the class attribute?

Because of specificity rules that have been created to deal with such circumstances, the .spec class wins out. Specificity describes the relative weights of various rules. Simple selectors, such as the H1 in the previous example, have a specificity of 1, while class selectors, like .spec, have a specificity value of 10. Following is a list of specificity weights.(The rule with the highest weight would take precedence in case of conflicting rules.)

H1 {(simple selector)} specificity = 1 
P EM {(contextual selector)} specificity = 2 
.grape {(class selector)} specificity = 10 
P.bright {(element/class selector combo)} specificity = 11 
P.bright EM.dark {(contextual element/class)} specificity = 22 
#IDsec {(ID selector)} specificity = 100

Calculating Specificity
Count the number of ID attributes in the selector.
Count the number of CLASS attributes in the selector.
Count the number of HTML tag names in the selector.
Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */

Making definitions more important
CSS has an !important rule to ensure that some settings remain although the user might use an own stylesheet or some inline style gets added via a CMS.

<div id="logo"><img ... /></div>
#logo {background:#f00 !important;}
would render the red colour even if the markup is changed to
<div id="logo" style="background:#fff"><img ... /></div>

The !important directive must be the last before the semicolon!

Naming
IDs and classes of elements should represent what these elements are, not what they look like. One of the main strengths of CSS is that it allows for redesigning a complete web site by changing the stylesheet. If CSS-P is used, you can even re-position elements at will. This is only possible when the selector names are generic rather than descriptive for one layout.

wrong:
#bluerightrectangle
.yellowlink
.topleft
.bottomlinks
better:
#mainnavigation
.specialoffer
.smallproductview
#breadcrumbs

Selector names should not be ambiguous, for example 'special'. What is it? A special paragraph? Link? Image? Names should be English, to avoid causing confusion in other developers who don't speak your language. Names can not contain spaces or special letters like colons or underscores. Let's avoid using dashes aswell.

Christian Heilmann

[KaiyureBoy]

OK!!!!! It Does work, thank you for your kindless.
__________________________________________________ _______________________________
Angelina Jolie Johnny Depp Al Pacino Brad Pitt site Robert De Niro

[ultimatewarrior8888]

Good writing. Keep up the good work.I love this site, let's try our best together, seize everyday, just do it!Runescapecoin.

[ultimatewarrior8888]

Good writing. Keep up the good work.I love this site, let's try our best together, seize everyday, just do it!Runescapemoney.