1. Avoid inline styles
While developing a website we can add styles in various ways. We can write CSS styles in a CSS file and import it in HTML file, write in <style> tag of <head> or write inline style within each element of the <body>.
Bad
<p style="color:#abc; font-size:14px; font-family:arial,sans-serif;"> ... </p>These are some of the problems with inline styling.
Lack of reusability
Using the same CSS class multiple times should be one of the major aims in adding style to a website. As our project gets larger if we do not use the same class for the same type of styles, there is a good possibility of writing redundant styles which unnecessarily makes the project larger. If we write inline style, we can never use it multiple times which breaks the DRY principle.
Inability to use CSS selectors
We cannot use CSS selectors while writing inline styles. Selectors like before, after, hover, focus etc are very much useful for styling which we simply cannot use in inline styling.
Difficulty in code readability
In a large HTML file, there will be a lot of elements. If in addition there are inline styles then it becomes very much difficult for someone to read and understand that HTML code.
Lack of writing media queries
Web developers nowadays must make the website responsive. To make the site responsive writing media queries is a must where different CSS rules are applied based on screen width. Inline style does never allow us to do that.
2. Avoid overly-specific selectors
If you create very specific selectors, you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. For example, you might have something like the below selector, which applies the rule to a <p> with a class of box inside an <article> with a class of main.
Bad
article.main p.box {
border: 1px solid #ccc;
}If you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. Instead, you could use the selector .box to apply your rule to any element that has the class box.
Good
.box {
border: 1px solid #ccc;
}There will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice.
3. Avoid !important rule
When an importantrule is used on a style declaration, this declaration overrides any other declarations. Using!important,is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
Some rules of thumb:
Always look for a way to use specificity before even considering
!importantOnly use
!importanton page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).Never use
!importantwhen you're writing a plugin/mashup.Never use
!importanton site-wide CSS.
4. Avoid using id attributes everywhere
Maybe you are one of the crazy ones who desperately want every bit of performance out of your CSS, otherwise, using id everywhere can be bad. Id attributes styles are hard to overwrite, and are meant to be unique per page so follow these guidelines for id usages:
Use it for something truly unique on the page like a logo and containers.
Don’t use it on or inside components that are meant to be re-used.
Use it on headings and sections of the website you want to link to.
Use an id generator to ensure uniqueness if necessary.
5. Prefer CSS shorthand
Use shorthand properties where possible.
CSS offers a variety of shorthand properties that should be used whenever possible, even in cases where only one value is explicitly set.
Using shorthand properties is useful for code efficiency and understandability.
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;... can be shortened to just one declaration:
background: #000 url(images/bg.gif) no-repeat left top;6. Minimise layout modification styles
Layout modifiers are properties like width, height, left, top, margin, order, etc. These are more expensive to animate and perform changes since they require the browser to recalculate the layout and all the descendants of the elements receiving the change. It starts to become more evident when you are making changes to a lot of these properties at once so, be aware of that.
7. Don't mix third-party CSS overwrites with yours
Whenever you write a style to overwrite a third-party library, consider putting it in a separate file for easy tracking and maintainability. If you decide to get rid of the library later, it will be easier to remove, and putting them in their own file is already self-documentation.
8. Be aware of styles order
CSS stands for Cascading StyleSheets which means that whatever comes last has the potential to overwrite previous styles so order your styles in an order that ensures that the style you want will be applied. It is all about understanding your way around CSS specificity.
9. Keep HTML semantics and use CSS for styling
It is common to find developers who go around changing their HTML in order to apply a certain style. In general, let the styling be handled by CSS, and structure your HTML in a way that makes sense semantically. There are exceptions to this rule, but always ensure that the adopted structure does not violate any HTML semantic rules. Write your HTML first with content in mind, not styling.