CSS doesn’t have to cause hair loss

Background

Cascading Style Sheets (CSS) is a powerful tool used for styling web pages.

CSS enables the separation of document content from document presentation, allowing engineers to style different aspects of web pages, including: fonts, colors, backgrounds, layouts, and animations, among others.

However, writing CSS that is maintainable, scalable, and performant can be challenging, especially as web applications grow in scale and complexity.

In this segment, I’ll share some CSS best practices that can help you write better CSS code, with some code examples of do’s and don’ts.

At a personal level, CSS caused me some hair loss. I’ll save you from the fate I suffered. Just read this! 😝

Use a CSS Preprocessor

CSS preprocessors such as Sass, Less, and Stylus are tools that help you write more maintainable and scalable CSS code.

These preprocessors provide features such as variables, mixins, functions, and nesting, among others. With variables, you can define values that are reused throughout your CSS code.

Mixins enable you to group CSS declarations and reuse them in different parts of your code.

Functions help you perform calculations and manipulate values. Nesting allows you to write CSS rules that are more specific and easier to read.

Do this ✅

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: #fff;
}

This code defines a variable named $primary-color with a value of #007bff. The .button class uses this variable to set the background color.

Don’t do this ❌

.button {
  background-color: #007bff;
  color: #fff;
}

This code sets the background color directly, without using a variable.

By using a CSS preprocessor, you can make your code more concise and easier to maintain.

Use a CSS Methodology

A CSS methodology is a set of guidelines and conventions that help you structure and organize your CSS code.

A methodology provides a consistent approach to writing CSS, making it easier for multiple developers to work on the same codebase.

There are several CSS methodologies, including BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS), and OOCSS (Object-Oriented CSS), among others.

BEM is a popular methodology that provides a naming convention for CSS classes. The BEM naming convention uses a double underscore (__) to separate a block and an element and a double hyphen (--) to separate a block or an element and a modifier.

Do this ✅

<div class="button button--primary">
  Click Me
</div>

In this code, the button class represents a block, and the button--primary class represents a modifier that changes the style of the block.

Don’t do this ❌

<div class="primary-button">
  Click Me
</div>

In this code, the primary-button class does not follow a CSS methodology and does not provide any information about the purpose or structure of the element.

By using a CSS methodology, you can make your code more consistent, maintainable, and easier to understand.

Use a CSS Reset or Normalize

Different web browsers have different default styles for HTML elements.

To ensure that your CSS code works consistently across all browsers, you should use a CSS reset or normalize. A CSS reset is a set of CSS rules that remove all default styles from HTML elements.

A normalize is a set of CSS rules that normalize styles across different browsers.

Do this ✅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

By using a CSS reset or normalize, you can avoid inconsistencies in the appearance of your web page across different browsers.

Don’t do this ❌

body {
  margin: 0;
  padding

Summary 👏

In this segment, we explored these three CSS best practices that can help you write better CSS code, including:

1. Use a CSS preprocessor
2. Use a CSS methodology
3. Use a CSS reset or normalize

Here are some bonus tips:

1. Use meaningful and descriptive class names
2. Use shorthand properties and values
3. Avoid using !important
4. Use flexbox or grid for layouts
5. Minimize the use of global selectors
6. Avoid using too many nested selectors
7. Keep your CSS code organized and maintainable

By following these CSS best practices, you can write CSS code that is more maintainable, scalable, and performant.