CSS Maintenance Best Practices

If you’ve ever worked on a large website as part of a team, or even if you’ve ever worked on a small website with a long history, you know that one of the first things that can get out of control and cause maintenance nightmares is the site’s CSS. After a while of people making one-time changes and additions, it often seems like every additional change breaks something else.

For this reason, various people have come up with strategies and best practices for keeping CSS under control. In this article, I’ll discuss a few of these best practices and then show how using a CSS framework such as Bootstrap 4 can make doing the right thing almost effortless.

Want more help? Get CSS Tips and Tricks from a live instructor.

Best Practice #1: Use a CSS Reset Stylesheet

Applying a reset stylesheet should be the first step in any website design. There are several widely-used reset stylesheets available, but the job of each one is the same: to even out the differences between different browsers’ default styles and to create a clean slate on which to build your website’s design.

To use a CSS reset, all you need to do is include the reset stylesheet file into your HTML page before you apply any other styles.

Best Practice #2: Create Reusable Styles

Another basic principle of making your website’s CSS more maintainable is to think in terms of creating reusable styles. For example, if you want to create a two-column layout by using floats, one way you could do it is by defining two styles to apply to two separate block elements, like this:


#column1 {
float: left;
width: 500px;
}
#column2 {
float: right;
width: 500px;
}

This is a very simple example, but you can see that the above two styles can only be used once each. In this case, a better way to write these styles would be to create reusable classes. For example:


.column {
  width: 500px;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

Now, anytime you need to style an element as a column that’s floated to the left or right, you can apply two classes to it. For example:

<div class="column float-left">here’s a left column!<div>

You end up writing more CSS the first time, but in the long run, you’ll save yourself effort both in writing your CSS and in maintaining it.

Best Practice #3: Don’t Repeat Yourself (DRY)

Let’s say you want to change the color, margins, and font-family for h1, h2, and h3 elements. One way you could do it is by creating three separate rules, like this:


h1 {
  color: #dadada;
  margin: 10px 10px;
  font-family: sans-serif;
}

h2 {
  color: #dadada;
  margin: 10px 10px;
  font-family: sans-serif;
}

h3 {
  color: #dadada;
  margin: 10px 10px;
  font-family: sans-serif;
}

However, this is far from efficient. A much more DRY way of achieving the same thing is to use the comma operator to apply the same styles to all three elements at once, like this:


h1,h2,h3 {
  color: #dadada;
  margin: 10px 10px;
  font-family: sans-serif;
}

Even if you wanted to apply different colors but the same margins and font-family to the three elements, it’s better to set the properties that are the same using a single rule, and then to apply the different properties in individual rules for the elements.

Best Practice #4: Use a CSS Preprocessor

Part of the reason that CSS can be difficult to work with is that it lacks many of the standard tools available in every programming language. For example, there’s no way in CSS to specify variables. As a result, each time you want to reuse some value — colors in hexidecimal notation, for example — you need to repeat the color’s hex code.

Wouldn’t it be great if you could make a list of the colors that you plan to use in your website, give them names that are meaningful to you, and then just use those names? It might look something like this in practice:


$primary-color: #333;
$secondary-color: #003333;
$tertiary-color:  #000033;

h1 {
  color: $primary-color;
}
h2 {
  color: $secondary-color;
}
h3 {
  color: $tertiary-color;
}

While this code won’t work in normal stylesheets, CSS preprocessors make this sort of thing easy by giving you a language for doing the things CSS can’t, and then compiling your code into standard CSS.

Best Practice #5: Favor Class Selectors

Applying styles using mostly class selectors has become a popular rule for many web developers and web design style guides because it reduces reuse and simplifies CSS files by focusing on applying styles, rather than on styling particular things.

For example, if you wanted to style all of your elements with a 1-pixel yellow border, you could do this with the following CSS:


img {
  border: 1px solid #ffff00;
}

But if you wanted to style a video with a 1-pixel yellow border later on, you’d need to repeat this style for the video element:


video {
  border: 1px solid #ffff00;
}

But what would happen if your company decided that it didn’t like the shade of yellow you used? You’d need to edit both the style for the img element and the style for the video element. A better solution would be to simply create a style for a class named ‘yellow-border’, like this:


.yellow-border {
  border: 1px solid #ffcc00;
}

Then, in your HTML, you can apply this border wherever you need it, like this:


<img src="myimage.jpg" class="yellow-border" alt="a picture">

However, this solution still isn’t perfect because you might decide at some point to change the official corporate border color to red, and then you’d need to go through each img tag on your site and update the class attributes, which would be worse than the previous problem of having to update several stylesheets.

A better way to handle this is to give your classes names that describe their purpose rather than their characteristics. For example, the class “yellow-border” might be better named as “media-border” if it’s used for borders around image and video.

Best Practice #6: Use a CSS Framework

A CSS framework, such as Bootstrap, collects together frequently applied styles into a single stylesheet and implements all of the above best practices for you so that you can spend more time thinking about how to improve your website, rather than on making your CSS more manageable. It can be thought of as a set of reliable precision tools that you can use to make crafting your website easier and to benefit from the knowledge and experience of Bootstrap’s creators and users.

As with any tools, CSS frameworks aren’t always right for every job, and they can have bad side effects when used incorrectly. But, learning and using a framework saves time and leads to better results in most cases.

Implementing CSS Maintenance Best Practices

Whether you choose to use a CSS framework, use another CSS methodology (such as Object Oriented CSS, or OOCSS) or create your own stylesheets and methodology from scratch, these best practices will help you to create stylesheets you can count on and understand in the future. To learn more about CSS, Bootstrap, and Web Development best practices, check out our CSS Training classes.

Web Development Classes

Blog Post Author: Chris Minnick

Chris Minnick is an author, instructor, and CEO of WatzThis, Inc. For more than 20 years, he has helped clients with the management and development of hundreds of web and mobile projects. Chris has authored and co-authored more than a dozen books including Coding with JavaScript for Dummies and Beginning HTML5 and CSS3 for Dummies. He has developed video courses for Pluralsight, O’Reilly Video, Ed2Go, and Skillshare on topics such as mobile development and React. His training materials also include courseware that is used for training software developers at some of the largest companies in the world.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.