anIDEA

Great Selectors

A selector is something which helps you to re-read your code.  When well-written, they are a valuable asset when returning to a file after a period of time.  A great one should contain: the element type, the id and the class name.

Example:

#id
#id .classname

In this example, however, you can’t tell where the .classname appears. A better example would be:

div#id
div#id a.classname

Also, when you are using selectors in your CSS, make sure they have at least one ID so you can remember where it is located in the document.

As a general rule, avoid using classes when IDs will do. Generally, classes should only be used for elements that are repeated or to define a state such as the currently highlighted tab.

Avoid Redundant Overriding

Examing the following code:

div, p {
    font-size:12px;
}

In the design, all paragraphs were included in a div. Why then, is div, p written in the selector? The div is enough. Overriding elements will make your browser work harder at best, or may create cross-browser bugs, at worst. Inspectors such as Firebug are particularly useful in identifying overridden elements.

Keep Track of Your Changes

In the end, developers are human and sometimes make mistakes.  I have an annoying habit of pressing the S-key without pressing Command simultaneously.  Not only does my project not save, but an S is added to the code. Needless to say, it can take a long time to notice such errors.

Also, the larger the project, the more developers that are likely to be involved. To merge your work together safely and to secure your previous work, I strongly recommend the use of a versioning system such as SVN.

80 Characters Per Line & Indentation

Rule of thumb: never write a line with more than 80 characters. In CSS, it’s not terribly difficult to adhere to this rule.  Most property definitions, except maybe “background,” aren’t going to take lot of characters.  This rule is even more important for selectors.

For the same reason, enhancing the readability of your code, make sure you’re indenting.  There are 2 different conventions: spaces (mostly 4) or tabbing.

div, p { font-size:12px; font-weight:bold; color:#111; background:#111; }

Should be :

div, p {
    font-size:12px;
    font-weight:bold;
    color:#111;
    background:#111;
}

Be Consistent With Measurements

For years, it was best practice to use em as the font metric to allow IE to scale text. But with modern browsers, this is no longer an issue. For modern designs, I recommend using pixels as the main size metric. Being consistent will remove surprises.

Example:  the second ul has for font size .49em

ul {
       font-size:.7em;
}

<ul>
       <li>Test</li>
       <li>
              <ul>
                     <li>Test</li>
              </ul>
       </li>
</ul>

Reset the Browser Default Style

It is best practice to always reset the browser stylesheet. Many developers use the selector * (all existing elements) to reset margin and padding. Though this works, you should reset only the items you’re going to use to avoid unnecessary overriding.

My reset looks like this:

html, body, h1, h2, h3, h4, h5, h6,
div, p, ul, li {
       margin:0;
       padding:0;
}

ul {
       list-style-type:none;
}
img {
       border:none;
}

This depends on the elements you’re using inside your document. For instance: if I use a table, I should append “table, tbody, thead, tr and td” to the selector.

Resources

This article is intended to be a little refresh on CSS Best Practices, but if you want to get more in-depth, you should check out these excellent articles for more details:

• CSS Standards & Best Practices
• CSS Best Practices

Image Credit: And all that Markley

Follow the author: @xethorn Follow AgencyNet: @agencynet

Pages: 1 2

blog comments powered by Disqus