12 Best Practices for CSS Development - Capicua

CSS Development Tips and Best Practices

CSS ( Cascading Style Sheets) is the language that defines a website’s presentation.

Mostly, it's easy to learn at first. But writing it the right way is another skill.

And one that's essential in professional web development.

There are several ways to achieve goals in CSS, some of which are better than others.

For example, many team members can access and change CSS files in a software company.

Code can break if everyone involved is not following the same standards.

This lack of protocol will most likely lead to rewriting it.

Thus, developers must stay in touch with best practices to be on the same page as their teammates!

So, let's take a look at our team's 12 tips and best practices regarding CSS.

1. CSS Readability

Write with many lines and give a line to every property. Most people prefer multi-line CSS.

Yet, there are a few cases when single-line CSS can be more readable.

Multi-line CSS makes it easier to find specific properties, like in the example below.

A. Single Line

.class {color: #fff; text-align: center;}

B. Multi Line

.class {
    color: #fff;
    text-align: center;
}

2. CSS Resets

A reset is vital to deal with browser inconsistencies.

Further, it helps avoid unpleasant surprises.

It can be anything: from a few lines of code on top of your stylesheet to an entire library of styles, like sanitize.css.

With a CSS framework, it’s not necessary to reset.

Also, strategies for resets vary. Let's see it below!

Universal

* { padding: 0; }

Eric Meyer's

html, body, div, h1, blockquote { padding: 0; }

Browser Correction

display: block;

Opinionated

box-sizing: border-box;

3. CSS Patterns

You should consistently organize your stylesheets.

Following organizational patterns allow everyone to find sections of code.

We use this index:

4. CSS Properties

Save time and make your CSS more readable by using shorthand properties.

These allow you to condense many properties into one convenient property.

You can use shorthand properties for time-saving and make your CSS more readable.

Even so, it’s important to know how they work before using them.

Not defined values in the shorthand property will be set to their default.

Thus, unwittingly, you can override defined styles.

body {
    background-color: #f4f4f4;
    background: no-repeat url("img_cat.gif") fixed center;
}

5. CSS Specificity

Use the smallest amount of needed selectors to apply a property.

In the spirit of keeping code as clean as possible, whenever possible, don’t be more specific than .class.

In some cases, it may be necessary to use more than .class, especially when applying .ID.

ID trump class in the specificity hierarchy: ID > Class > Element.

Yet, a selector like .div.class is even more specific than an ID.

#real {
    font-size: 12px;
}
.fake {
    font-size: 14px;
}
div {
    font-size: 18px;
}

6. CSS Classes

You should pay attention to correctly formatting classes.

Use the – separator when writing classes!

Don’t use camelCase or underscores to name them.

Correct: first-section
Incorrect: firstSection, first_section

7. CSS Selectors and Properties

Space out multiple selectors and long properties.

Make stylesheet reading easier with line spaces!

h1,
h2,
h3,
background:
    url('a long URL')
    no-repeat
    left bottom
other-property:...;

8. CSS !important

Property !important tends to be the last resource.

Moreover, it only applies when specificity doesn’t work.

This often happens with inline styles or styles injected with JavaScript.

9. CSS Calc ()

You’ve got a friend in Calc()!

It allows you to use operators for properties with units of measure.

For instance, height, width, font size, border, etc.

div {
    height: calc(100% - 80px);
}

10. CSS Units of Measure

Get your units of measure clear!

Fonts can get various measure types, like EM, PX, PT, REM, or %.

Within those, the most used are PX and EM.

11. CSS Box-Sizing

By default, to determine the width, CSS adds element values to determine the width.

But, wait — if height is not defined, where is 42px coming from?

div {
    width: 100px;
    padding: 20px;
    border: 1px solid black;
    margin: 20px;
}

Use box-sizing: border-box to make sizing easier to manage.

12. CSS NTH Children and Types

You can target the children of certain elements, within groups of siblings, with :Nth-child() and :nth-of-type().

For example, in a <ul>, we can give styles to some of the <li> elements and not others.

:nth-child(4n) {
    color: lime;
}

:p:nth-of-type(4n) {
    color: lime;
}

We hope these CSS tips and practices help you improve your styling game! You can dive further into CSS with our 15 Key Advanced CSS Best Practices.