SOLID Principles And CSS (Part 1)

SOLID principles are relatively old but incredibly useful concepts to apply to any OOP codebase in any language.

SOLID stands for Single Responsibility Principle, Open/Closed Principle, Liskov Substitution Principle, Interface Segregation Principle, and Dependency Inversion Principle. Together these principles aim to help developers create systems that are maintainable and extendable.

In this post I’ll take a look at the first SOLID principles and next article I’ll continue with the remaining four principles.

Single Responsibility Principle:

The Single Responsibility Principle (SRP) is the most important one of them. It states that every module should have only one responsibility and reason to change.Let’s see how we can apply this principle in CSS world.

SRP calls for more classes with less code inside each.

Trying to do multiple things usually leads to doing none of them as well as possible. It also means that modifying one part of the code could have adverse affects on unrelated parts of the same code.

The idea is break things down to their smallest chunks in order to improve them independently of other chunks and to be able to combine them more flexibility.

Have you ever done something like the following to fix and center a web page?

.wrapper {
max-width: 75em;
margin: 0 auto
}

The code above follows SRP, because it only does one thing. It’s not also setting backgrounds and borders or anything else. The purpose of the class is simply to group everything inside it. Here all it’s doing is centering that group of elements.

Unfortunately most of us don’t carry out this principle throughout the rest of our css. I know I don’t. Here’s a bit of css from this site for styling blockquotes.

blockquote {
margin:1.625em;
color: #656565;
font-style: italic;
}

The code is doing 3 different things (and not just because there are 3 lines of css). The first line is affecting the box model, the second affects color, and the third deals with type. Each would be better in a separate class according to SRP, since they all have different responsibilities. The following would adhere to SRP since both lines affect color and share a single responsibility.

.quote-color {
background: #efefef;
color: #656565;
}

Following the single responsibility principle should help us separate structure from skin and help us decide what to abstract from a given visual pattern. Colors would go in one abstraction, dimensions, in another., and type in yet another. Instead of placing every property for particular class or element selector, we should divide our css into group of properties that affect different things.

  • box model
  • typography
  • color and backgrounds
  • position and display
  • tables
  • lists

You can check this list of css properties on HTML Dog to see other potential groups and some of the specific properties that would be included in each.

As defined by SRP, responsibility means a reason to change. Looking at the list above if we only include properties that affect type in one class then the only reason that class needs to change is because we’re making typographic changes. We wouldn’t need to change the class because our color scheme is changing.

If there’s a downside it’s that SRP will lead to an increase in how many classes we add to our html. If I were to separate responsibilities in the css on the blockquote I showed above, I’d be adding 3 different classes to style them. Of course, those classes wouldn’t be specific to the quote and could be used across the site.

Overall SRP calls for more classes with less code inside each. Ideally that will lead to more cohesive, reusable, and independent classes. Taken further it could lead you to write separate stylesheets, one for each responsibility.

Hope you like the article,, feel free to hit the clap button below 👏 to help others find it! I would be writing reaming four SOLID Principles.