CSS DO’s and DON’Ts – Part III
Welcome to the third installment of CSS DO’s and DONT’s, a monthly blog series designed to provide useful, time-saving CSS tips while making note of some bad habits website developers tend to repeat in their code, despite the negative impact on workflow.
DO Properly Organize Your CSS File
Below are a few stylesheet layout and setup tips that can help to keep your workflow organized from initial planning and development to implementation and maintenance:
1. Hierarchy Management
You can layout your CSS in any order that best suits your own personal workflow style, but it is highly beneficial to develop and maintain a system that you can carry out consistently from project to project. The following list is a fairly common group breakdown among developers, and works well as a first tier organization system:
* Reset Styles
* Global Styles (body, paragraph, lists)
* Colors
* Layout and Structure
* Navigation
* Headers
* Text Styles
* Images
* Tables
* Forms
* Misc Styles
Also, don’t forget to flag each first level section with comment separators for easier future reference:
/* ———————————-*/
/* ———-GLOBAL STYLES———–*/
Global Styles Here
/* ——-END GLOBAL STYLES———–*/
/* ———————————–*/
2. Shorthand CSS
You can vastly minimize the amount of code in your stylesheet by learning to write shorthand CSS.
The following two property declarations actually accomplish identical styling outputs, even though “this” class only uses 4 lines of code versus the 14 lines of code in “that” class:
#this {
margin: 1px 5px 1px 5px;
font: bold 11px/16px Arial, Verdana, sans-serif;
border: 1px solid #cecece;
background: #fffff url(bg.gif) no-repeat;
}
#that {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 1px;
margin-left: 5px;
font-weight: bold;
font-size: 11px;
line-height: 16px;
font-family: Arial, Verdana, sans-serif;
border-width: 1px;
border-style: solid;
border-color: #cecece;
background-color: #fffff;
background-image: url(bg.gif);
background-repeat: no-repeat;
}
Keep in mind that when using shorthand to set varying margin or padding properties for each side, the order of declaration is top, right, bottom, and left; i.e. “1px 2px 3px 4px;”.
3. Indent Relative and Descendent Rules
This practice is particularly helpful in your Header, Paragraph and Text Style sections.
Using your header styles as an example, declare first the h2 properties you know will remain consistent among the different sections of your website, followed by indented customized header classes with additional and/or overriding properties:
h2 {
font-family: Arial, Verdana, sans-serif;
padding-bottom: 20px;
}
#sidebar h2 {
color: #333333;
font-size: 16px;
padding-left: 5px;
}
#content h2 {
color: #333333;
font-size: 18px;
padding-top: 10px;
font-family: Trebuchet MS;
}
DON’T Overuse Conditional Comments and CSS Hacks
In an ideal world, all browsers would render CSS identically, meaning that conditional comments and hacks would have no need for existence.
Since we happen to live in an imperfect world, the next best option for developers is to avoid the need for conditional comments and CSS hacks by simply staying within current browser CSS support and writing valid, standards compliant code. However, in times where including the occasional conditional comment or hack is an absolute necessary evil in order to achieve your desired output cross-browser, the question remains: Should you use hacks or conditional commenting?
A few thoughts to consider:
1. Conditional commenting is aimed at specific browsers (hello, IE!), so you don’t have to worry about causing additional problems within other browsers, whereas hacks will be rendered by all browsers.
2. Conditional commenting allows you to keep your design and layout workarounds in a centralized, single location as an external stylesheet rather than scattering hacks throughout your CSS file.
3. Conditional commenting needs to appear in your HTML, meaning that once the conditional statement is no longer necessary, it will need to be removed from every page.
Employing either method almost always ends up being a maintenance nightmare, so make sure you keep both to a minimum.
Staying within standards compliance and ensuring that your code validates are two ways that you can avoid the need for conditional commenting and hacks. There are a number of free developer tools available to help you do just that. Firebug, HTML Validator and IE Tab, all Mozilla Firefox add-ons, are three widely used tools that can and should be used throughout the development process to help you catch, and fix, code errors early on to avoid last minute hacks.
You can catch up on our series by reading last month’s CSS DO’s and DON’Ts.
