Here are some of the quick tips for best practices of writing CSS which we usually do not give more attention to while coding. These practices help in ease of development as well as maintain the standard compliance code.
∗ Avoid using !important
It is a bad practice to use
!important inside style sheets to override some CSS declarations. As a developer we find it very easy or lazy(!) to use !important rule to override a declaration in CSS, sometimes even when its not necessary. Instead, understand the CSS hierarchy and use of powerful selectors.
Lets study an example to understand basic CSS cascading:
This is our HTML markup:
<body>
<h1>Heading</h1>
<p id="new">A paragraph of text.</p>
<p class="new">A second paragraph of text.</p>
<p class="new mytext">A second paragraph of text.</p>
</body>
Let's apply multiple properties to same element. Below is our CSS rule set.
* {color: white} // This is universal selector which applies white color to all elements
p {color: red} // This is generic selector
p#new {color:blue} // This is ID selector
Result: When web page is rendered, what would be the final style applied to "p" element?
Usually ID selectors have the higher priority above class selectors based on specificity. In our HTML page, we have <p> tag but with a specific ID #new so the color rendered will be blue and not red.
Now lets add another rule:
p.new {color:blue} // This is first <p> with .new class selector
.....some css here.........
p.new {color:yellow} // This is second <p> with same class
Result: In this case, <p> tag color will be yellow. The reason is source ordering. p.new are declared twice but later one will be rendered.
If we need to apply blue color to all <p> tags with .new class except one with .mytext calss, we would simply strengthen the selector like,
p {color:red} //selects all <p> tags in a webpage
p.new {color:blue}
p.new.mytext {color:yellow} // This targets <p> with .new and .mytext classes
In some cases, there will be few inline styles on elements which might be generated ones and not in our direct control. In such situations try to track the source ordering and strengthen your selector by finding parent class or ID and define a specific CSS rule to override. Use !important only in absolute necessary conditions. There is a detailed article on Smashing explaining about !important rule and cascading which is worth reading.
∗ Use CSS comments
Comments can be really useful to manage your CSS document. It navigates the author and makes it easy to identify the specific blocks of CSS rules inside the file. Provide proper information about all styles and fixes you provide in your stylesheet. It will be easy to manage in future for you as well as someone who might work on it in future at some point of time.
A neat and properly organized LESS CSS document can look something like below. Notice the comments, consistent spacing and separated sections.
∗ Maintain consistency and standard
Yes, it is also a good practice to maintain the consistency of writing CSS rules. For instance,
- Break the line after each rule declaration and don't play one line game as eventually we are going to minify the code.
- Provide equal spaces throughout the document.
- Maintain comments and its method of writing along with formatting.
- Avoid too much extra space and breaks.
- Separate the blocks according to sections of the HTML document from top to bottom. It should be drafted as generic elements > reusable classes and groups > layout specific styles (from header to footer) > page specific styles if any > media queries > other fixes like IE hacks
- Combine selectors in group wherever possible. Be specific but only when you need.
- Use lesser hacks for browsers, instead use conditional comments. For CSS3 properties, make use of vendor specific prefixes.
See these points depicted in below image.
∗ Use shorthand properties
Use shorthand properties and values wherever possible. See below chunk of code.
.box {
margin-top: 8px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 10px;
}
button {
padding: 0 10px 0 0;
}
This could be pretty written as
.box {
margin: 8px 10px;
}
button {
padding-right: 10px;
}
You can drop out the units for zero values as in above example. Also color codes can be written as short values. When possible use three character hex value for color code as #000 instead of #000000.
You can drop out the units for zero values as in above example. Also color codes can be written as short values. When possible use three character hex value for color code as #000 instead of #000000.
∗ Write semantic classes
I saw developers using classes such as .margin2px, .margin10px and so on. Avoid using such classes just for a single element, instead try to use combinations of parent child elements to override default style declarations. Use meaningful classes for example .editModal, .uploadModal and so on.
∗ Avoid negative margins
Do not use negative margins to hide something on page.
∗ No inline styles
This must be a common practice for developer to NOT to use inline styles inside HTML documents. It will mess up your page. Also it is easy to manage styles with proper CSS context. When you target only a single instance on a page, you may need to use inline CSS to make it look proper but do not overload the page by tons of inline styles unless it is a critical need.
∗ Code smart
Before creating CSS file with all bunch of styles, be thoughtful about the entire flow. Source ordering matters as we learnt in first section here. Disable some undesired user agent styles. For example IE browser shows outline to any image, hyperlink or form elements on the page which can be prevented using simple CSS rule as
img {outline:none}
Provide fallback for older browsers if required, especially when using new CSS3 properties.
∗ Validate CSS
If possible, its good to validate CSS file using W3C validator.
∗ Compress CSS files
Lastly, compiling CSS code and compressing the files lead to faster loading of the site. It also reduces server requests if compiled in a single file. Use CSS optimizer and compressors to do the right job.
