CSS is Everything. For many web developers, CSS is the beginning in a design world that will be followed by Javascript and understanding of server-side scripting. In order to become a good web developer, one must know how to work with CSS. And a good way is to know the good practices in the CSS area.
1. CSS Reset
The best reset css is Eric Meyer’s which was adopted by most of the web designers and it is also a part of the Blueprint CSS Framework.
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on
– Eric Meyer
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, css, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } |
2. Link States
Defining your CSS styling for the link states is very important in order to have similar experience on all browsers. This is known as the LoVe HaTe rule:
1 2 3 4 | a:link {color: blue;} a:visited {color: purple;} a:hover {color: red;} a:active {color: yellow;} |
3. CSS Shorthand
One good and important feature of CSS is the ability to write css in a minimized way. Instead of creating a CSS rule and adding lines of properties, you can use the shorthand version and simplify your css. I will give you the example of border, but there are different CSS properties that have the shorthand ability like margin, padding, font, background and list-style. You can check Dustin Diaz’ blog for the best CSS shorthand resource on the web
Normal
1 2 3 4 5 | element { border-width: unit; border-style: (solid dashed dotted double); border-color: color || #hex || (rgb / % || 0-255); } |
Shorthand
1 2 3 | element { border:border-width border-style border-color } |
4. Horizontally centered block elements
This is a common practice for most of the sites that have their layout centered in the browser. The way to do that is through the MARGIN property.
1 | margin:0 auto; |
5. Resetting font-size to Em
A common problem with CSS css was whether to use pixel or em units for font. The verdict was that em is better because a user can increase or decrease a font size with the browser. The next approach is very handy and it helps you see EM as PX.
1 | body {font-size:62.5%;} |
In this case the font-size is reset to 1em and 10px = 1em. So when you want a 18px font, you will only have to say font-size:1.8em. And in this way you are not forced to calculate ems.
6. Clear floated containers
This is very good when you have a block container with background or border that has floated elements inside. When this happens, the container is not extended to wrap around the floated elements and in this case the background and the border will not be displayed in the desired position. The solution is to clear the floats. You can do that by creating a new div after the floated elements with a clear:both property, like in the next example:
1 2 3 4 5 | <div><!– float container –> <div style=”float:left; width:40%;”><p>Content</p></div> <p>Text not inside the float</p> <div style=”clear:both;”></div> </div> |
If you want to better understand this concept I suggest reading the Clearing a float without markup. There you can find an alternative to this, without adding markup to your css.
7. Drop Cap
I’m sure you all know that big first letter in magazine or newspaper articles. The good news is that a drop cap (that’s how it is called) can be reproduced in a webpage with the help of CSS. It only takes some CSS properties and a span that will wrap the letter(s).
1 | <span style=”float:left; padding-right:2px; font:bold 3em Georgia; line-height:1em;”> T</span> |
8. Debuging CSS
This is a common problem for many designers which can be easily fixed using some special classes in order to see the glitches in your designs. In our case you can use the fix class which has a green background and a red border.
1 | .fix { background:#0f0; border: 1px solid #f00; } |
9. Avoid Hacks
I think that one can create a design without having to work with special browser hacks. My opinion is that instead of adding a CSS hack, you can adapt your design a little bit or try and fix it in a standard way. I don’t use hack and I don’t intend to.
These are some of the best practices regarding CSS. Feel free to comment with your below and I’ll add them to the list =]