It can happen at any time and for many reasons. You need to change some style that is already declared somewhere in your stylesheet or in other, more serious case, you need to include another brand new CSS stylesheet and change more styles at the same time. We will take more closer look at this subject and discuss the reasons for overriding style rules for elements in your HTML alongside with some recommendations when and how to do it properly and also when to avoid it. Let’s get to work.
Most of you are probably already familiar with the term “overriding” either with connection to CSS or from any other language. However for those of you who are not … Overriding is simply declaring new rules for some element, class or id while re-writing or changing the already existing ones at the same time. The best way is to demonstrate it on some example. Let’s say you need to change the color you used for paragraph, but only in one place and keep the others untouched. You can do couple of things … First is to use inline style.
Example:
<p>Voluptate aut elit ullamco. Ad litteris tractavissent.</p> <p style="color: red;">Magna hic aliquip. Enim comprehenderit singulis elit admodum.</p> <p>Qui cernantur an ullamco, se qui amet aliqua dolore, sed summis veniam.</p>
This is not the best thing to do (it’s pretty bad). It clutters you HTML code and mixes it with CSS. If you change your mind in the future, you will then have to find this single paragraph and change the CSS value for color manually here. If whole code is longer than just couple of lines, this can turn into nightmare. Second option is to use selector.
Example:
HTML:
<p>Voluptate aut elit ullamco. Ad litteris tractavissent.</p> <p>Magna hic aliquip. Enim comprehenderit singulis elit admodum.</p> <p>Qui cernantur an ullamco, se qui amet aliqua dolore, sed summis veniam.</p>
CSS:
p {color: black;}
p:nth-of-type(2) {color: #c00;}
This approach is much better since we don’t have to search through the HTML like in previous case if we will want to change the value of color property. However our CSS can turn into mess and chaos if we will use too many selectors. The last option is to use class.
Example:
HTML:
<p>Voluptate aut elit ullamco. Ad litteris tractavissent.</p> <p class="red">Magna hic aliquip. Enim comprehenderit singulis elit admodum.</p> <p>Qui cernantur an ullamco, se qui amet aliqua dolore, sed summis veniam.</p>
CSS:
p {color: black;}
.red {color: #c00;}
This is probably the best option. Why? You are keeping your HTML and CSS separated (no inline styles), you are creating new class instead of using selectors (keeping the CSS simple) and you are actually following the “DRY” rule. If you will decide to use this color again later, you can just use this class and avoid defining the same rule again.
Examples above showed us couple of situations when we were changing styles for text. Another time you will need to override some rules can be when including fallback for color, picture etc,. If you don’t know what fallback is, think bout it as a ‘backup code’. If the browser does not support some property, value or format it will omit it and use this fallback. Imagine that you have an image for logo and you want to include it on your pages. You want to keep the quality and responsiveness so you decide to use SVG format. Unfortunately, IE 8 and earlier does not support this format. Should you then forget about it? No, you can use it even so while also including a fallback with PNG or JPEG version of your logo.
Example:
.image {
width: 100px;
height: 30px;
background: url(../img/logo.png) no-repeat; /* Our fallback */
background: url(../img/logo.svg) no-repeat; /* If supported use this */
background-size: 100%;
}
This way, thanks to cascading principle of CSS, the browser will first find the PNG and use it. After then it goes on another line with SVG version defined. If browser support SVG, it will forget the PNG and use this SVG instead. If not, it will simply ignore the SVG and continue on next line. You can use the same with colors by defining hex or rgb first and rgba (not supported so well as rgb or hex) later on. The difference between rgb and rgba is the last “a” which stands for “alpha” which means transparency. 1 is 100% (fully visible) and 0 fully transparent. If you want you can omit the zero before the dot – 0.5 -> .5.
Example:
h1 {
color: rgb(204,0,0); /* Our rgb fallback */
color: rgba(204,0,0,.5); /* If supported use this */
}
IMPORTANT: Always define your fallback as the first. The browser reads CSS in cascading order (from top to bottom) and if it find duplicate properties, it will use the one defined later. If you switch the order, the browser will always use the fallback (is defined as last) and ignore the property we wanted to use even if it support it.
Using multiple stylesheets is another situation when you will need to use overriding. This can happen when you want to include stylesheet for other browsers with poorer support of some properties or values you used in your project or for mobile devices and also don’t forget about print stylesheet. In all of these cases it is reasonable to use overriding as necessary thing for keeping user experience across different browsers and platforms. Here is not much to talk about, just follow the “DRY” and “KISS” principles and all will be OK.
Summary
As you saw, the reasons for overriding your CSS styles are many. Some of them are good and some are just result of poor programming habit or not paying attention enough. Two good rules or principles to keep in mind when it comes to overriding rules are “DRY” – Don’t Repeat Yourself – and “Keep it simple.” If you remember at least those two principles, you will naturally avoid doing the most of mistakes that lead to unnecessary overriding CSS rules.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
