CSS Tips
I thought I’d share some of my CSS habits/top tips, some of my habits may be more controversial than others, but it’s always good to share.
Looking Pretty
Always remember to format your CSS nicely. Most CSS coders are designers, and love to make things look pretty, which also makes the CSS easier to read.
One line CSS declarations – I always put my entire declaration onto one line, it makes declarations a lot easier to find, and even better if you keep your properties in alphabetical order.
Use Shorthand – My rule is that if you are setting any more than one property use shorthand, here’s a clue to what I mean:
/* You could right */
.dummy {
margin-top: 10px;
margin-bottom: 10px;
}
/* but what's the point when this exists */
.dummy { margin: 10px 0px; }
/* or even */
.dummy { background: url('myimage.jpg') blue no-repeat left top; }
Shortcuts – When your CSS file becomes massive instead of splitting the file up into manageable chucks, which causes unnecessary hits on your server, just split the file with comments. If you use a wild card character like @ you can easily search for specific sections.
Make things easy
CSS is tricky, so use tools to make it easier.
Grids – While I am still debating whether grids are appropriate for smaller scale projects, if you use a wide variety of different layout, or are having trouble with the compatibility of your current layout take a look at CSS grids, there are loads available such as Blueprint and the Yahoo UI.
Check – Always validate your code, i personally run mine through Microsoft Expression Web which checks for bugs, you can also use the W3C Validation Checker.
W3C CSS Validation Checker
Avoid using too many selectors – Just specify the minimum number of selectors needed. A td always appears within a tr which always appears within a table. If you find yourself nesting your selectors like the example below, you are probably being too verbose.
table tr td {...}
/* is the same as */
td {...}
Points, they all add up
Don’t forget that all the different selectors have a different weighting (also known as specificity), and the ordering of your selectors will affect which one has president.
A selector’s specificity is calculated as follows:
- count 1 if the declaration is from is a ’style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
- count the number of ID attributes in the selector (= b)
- count the number of other attributes and pseudo-classes in the selector (= c)
- count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document’s DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
- Taken from the W3C specification
Browser Support
Avoid supporting anything but the most recent browsers. I don’t know anyone who use IE5 anymore do you? Also stop uses hacks for IE6, some careful rethinking and workarounds could be explored before resulting to using hacks. With the less hacks the more you can avoid having a separate style sheet for each browser. If you look at Wikipedia in source view you will see they have a separate style sheet for IE5, IE5.5, IE6, IE7.
Set things up
Spending a couple of minutes at the start of the project setting up all your colours and classes could save you hours in the long run.
Utilities – Build a set of CSS utilities which you could use everywhere. E.g.
.left { float:left; }
.right { float: right; }
.overflow { overflow: hidden; }
.clear { clear: both; }
.pad { padding: 10px; }
Define your colours – Define your commonly used colours at the start of the stylesheet then you will always know where they are for easy reference.
Keep Things Simple
Always go back and try and make your code simpler, and remember to comment everything. This make it easier to find changes and edit them. There is no need to get any more complicated than you need to be. For some more tips check out Smashing Magazine who have a great article on CSS ideas.
Reply