CSS is all about overrides

All we, who are associated with web technologies, are aware of Cascading Style Sheets. We all know how CSS works, what are the procedures, values, syntaxes etc. more or less. 

I am working with CSS for last 10 years. It was started with a simple one i.e. text-decoration: none; long time ago. But today CSS has been fulfilled with lots of new rules; new HTML elements have also been introduced, so it is now more vast than it was earlier. 

But the basic pattern of CSS remains same and that is about overrides. Simply, CSS is overrides. It is a fun to play with CSS once the associated project is in a very large volume, has various CSS files attached and we need to make our page perfect with our rules in a clean, minified, standard manner. 

I will discuss about CSS overrides as I’ve found in my experience. 

First, how a standard CSS document is written? It should follow some basic steps or orders with proper /* */ comments: 

1. Browser reset
2. External libraries
3. Common rules
4. Generic HTML elements
5. Re-usable classes
6. IDs
7. Other classes
8. Pseudo elements
9. Clearfix methods
10. Media queries 

1. Browser reset:

One can pick any of the standard reset CSS available globally, like Yahoo reset, normalize etc. Honestly there is no difference. Just you need to copy paste the rules into top of your document. 

And it will override the browser defaults, like padding, margin, font sizes etc. 

2. External libraries

Any external libraries, used in the project like fancybox, anythingslider etc., should be included in position no. 2 as it is always recommended to maintain a single CSS document to reduce number of multiple HTTP request. 

External libraries will automatically override the no.1 rules if there any conflict.

3. Common rules

Common properties like body, p, div should be included in step 3. Generally common part contains these rules: 

body{font: 400 16px/22px Arial, sans-serif; font-style: normal; text-align: left; color: #333; background: #c8cbc9}
body, body *{-webkit-font-smoothing: antialiased; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
a, a:hover, a:active, a:focus, button, input, select, textarea{outline: none; text-decoration: none}p{margin: 0 0 15px}  

Common rules will override any conflicts it may found, like majorly with fonts and its associates.  

4. Generic HTML elements

Here we include the rules for various HTML elements, like h1, h2, input etc. It will look like this: 

h1{font-size: 43px}input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], textarea, select, input[type=submit], input[type=button], input[type=reset], button, .btn{-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; min-height: 40px; vertical-align: middle}input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], input[type=submit], input[type=button], input[type=reset], select, textarea, .btn{-webkit-appearance: none}input[type=radio]{vertical-align: baseline}  

These rules will override any conflicts it may found, like majorly with fonts and its associates. 

5. Re-usable classes

All the re-usable classes should be included in step 5, like: 

.a-center{text-align: center}
.a-right{text-align: right}
.f-left{float: left}
.f-right{float: right}  

Re-usable classes will override any of the rules previously mentioned. Like, suppose we had a center aligned h1 

h1{text-align: center} 

Now we can override it with <h1 class=”a-right”> which will make the h1 right aligned. 

6. IDs

All the IDs should be included at no. 6. One can include new HTML5 elements along with the IDs, like: 

#wrapper{max-width: 100%}header{height: 100px}header#intro{height: 60px} 

In the given example, header rule has been overridden with #intro.

7. Other classes

All other classes should be included in no. 7 like: 

.form{list-style: none}.form li{padding: 8px 0}.menu{padding: 17px 0 19px}.menu nav{float: right}#wrapper{max-width: 100%}#wrapper.home{max-width: 80%}  

In the given example, #wrapper rule has been overridden with .home.

8. Pseudo elements

All the pseudo elements will be included at 8, like :first-child, :last-child, :empty etc. 

Suppose, in step no. 3 we had p{margin: 0 0 15px}, in step 8 we can set a different rule for every last p element with p:last-child{margin: 0} 

Here the pseudo rule overrides its conflict. 

9. Clearfix methods

Clearfix is a standard trick to break a float element. Whichever element has been declared as float right or left, wrapper of that element should have a clearfix. Like: 

#page:after{content: " "; display: table}
#page:after{clear: both} 

So, clearfix overrides element’s default behaviour. 

10. Media queries

Media queries will be included at the bottom, so it can override the rules where required. 

Tips:

Mark !important is the easiest override method, though it is recommended to avoid always as it may complicate the CSS document. Except using !important one can use a extra selector to override any rule. Example: 

Line no: 2: .home nav li{font-size: 12px}
Line no: 12: .home nav li{font-size: 14px !important}
line no: 12: .home nav ul li{font-size: 14px }