CSS plays a major role in web development. It gives a website its look and layout. What most people don’t know about CSS is that it’s one web development assets that the browser will look for. The browser is blocked from rendering the page until CSS is downloaded and parsed, it must be as lean as possible. Here are five tips to help you get there.

While working with CSS, there are certain do’s and don’ts that should be kept in mind. This helps in getting the efficient results from CSS.

NAMING CONVENTION

Don’t describe style in selector names

Do not use descriptive class names like ‘ green’, ‘orangeDot’ etc. Instead go with class names that describe the purpose of the element or content and not its appearance.

Don’t

.blue-text { … }

Do

.highlighted-text { … }

Selectors should describe purpose, not style.

Keep specificity as low as possible without using tag selectors

Specificity can be a pain in the ass when it starts skyrocketing. Try to keep it as low as possible.

Don’t

.content #intro .icon { … }

Do

.intro-icon { … }

Talking about specificity, NEVER use id selectors and !important.

Do not use ID SELECTORS

ID selectors are fine, valid and perfect for styling unique parts of pages. But you can only use one ID per page. Here’s some of the reason why you should not use ID selectors.

1. Class specificity is lower than ID specificity

IDs have a much higher specificity than classes. A class on its own can’t overwrite styles belonging to an ID. To “beat” the ID, you would need either more IDs or to use !important. (Never use !important unless it is your last resort).

2. Classes can be reused.

IDs should be unique on a page ( but then some browsers didn’t follow this strictly). This means that if you use ID instead of class, you won’t be able to reuse the style attached to it within the same page. Classes, however, can appear on several HTML elements on the same page.

3. An element can have several classes, but only one ID

You can add many classes to a HTML element, for example 

, but not ID.

Make all selectors referring to a page/component start with the same word.

Name your class related to which page they are used. This way, given a class name, you will automatically know which file to look for.

For example;

Don’t

 .front-page-title { … }
.intro-home { … }
.home-text { … }

Do

.home-title { … }
.home-intro { … }
.home-text { … }

Don’t reset styles you just wrote

Don’t

.menu-item {
  margin-top: 5px;
}
.menu-item:first-child {
  margin-top: 0;
}

Do

.menu-item:not(:first-child) {
  margin-top: 5px;
}

The :not() pseudo-class has existed for years now and it’s well supported by all browsers, so there is no reason to write two rulesets, one creating the styles and the next one resetting them for a specific subset of elements when you could achieve the same with only one ruleset.

Use shorthand properties

You can shorten your code by using shorthand. For elements like padding, margin, font and some others, you can combine styles in one line. For example,

Don’t

font-size: 1.5rem;
line-height: 1.618;
font-family: "Arial", "Helvetica", sans-serif;

That’s a lot of CSS! Let’s tidy that up:

Do:

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

The font shorthand property condenses several declarations into a handy one-liner that takes up much less space.

This also applies in margin;

 margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.

The padding property works the same way. 

Cross Browser Compatibility

USE RGB format instead of Hex format

When you’re building a website, you simply must realize that it will be rendered by different browsers ( from niche ones like Konqueror to giants, such as Firefox, Chrome or IE), on different operating platforms and on different devices. As a web developer, it is your responsibility to create a unique experience that works equally great on all possible devices and systems.

For example:

A background-color with decreased opacity in hex format. This will work well in Chrome but not in Microsoft Edge and Internet Explorer. To solve this, convert it to RGB (RGBA if the opacity has been reduced).

Learn how to hasten page rendering by cutting the excess from your site’s CSS.

Render blocking css makes your website slow. Every one of your css files delays your page from rendering. The bigger your css, the longer the page takes to load. The more css files you have, the longer the page takes to load.

Do not use @import to call css

The CSS @import function allows a web developer to include external CSS files in a document. You can usually find it in the top lines of the css file looking like this:

@import url("cssfile.css");

The use of this method is not recommended because it adds to the time that it takes to load your css before your page can load.

Instead of calling that css file using the @import, include those css files from the html file by using the following code…

Make sure to replace “style.css” with the location and name of your file.

Remove Inline CSS files

Each css file your page uses adds additional time to your webpage loading by requiring an additional file to be called.
Because inline styles have the highest specificity in the cascade, they can overwrite things you didn’t intend them to. They also invalidate one of the most powerful aspects of CSS – the ability to style lots of web pages from one main CSS file to make future updates and style changes much easier to manage.

Use shallow selectors

Used consistently, shallow selectors can trim kilobytes off big style sheets. Take this selector:

Dont

nav ul li.nav-item

Instead, write it like this

Do

.nav-item

By doing so, the browser will render the elements targeted by shallow selectors faster. The browsers read selectors from right to left. The deeper the selectors are, the longer it takes for the browser to render and re-render the elements those selectors are applied to.

But sometimes you may need to additional specificity to overwrite a style from a framework like bootstrap.

1