Single Responsibility Principle (SRP)

Atomic Design System architecture with SCSS, ITCSS

Search…

Definition : 
A class should have only one responsibility.
“Loosely, the single responsibility principle states that every module or chunk of code(...) should do one job well and one job only. The benefits of this are mainly in the way of maintainability and extensibility.“
Let's take an exemple that does not follow the SRP :
/* <a href="/product" class="promo">Buy now!</a> */
​
.promo {
    display: block;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #09f;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
    border-radius: 4px;
}
"Here we have a class for a promotional box of content. Here we are doing two things—we are defining box model and structure and we are defining cosmetics (colouring etc).
We can refactor this code to adhere to the SRP by splitting those two chunks of functionality into two classes:
/* <a href="product" class="island  promo">Buy now!</a> */
​
​
.island {
    display: block;
    padding: 20px;
    margin-bottom: 20px;
}
​
.promo {
    background-color: #09f;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
    border-radius: 4px;
}
​
We now have two classes which each carry a single responsibility; .island boxes off content and .promo applies our promotional styling. This now means that we can do things like this, which previously we couldn’t:
Previously we couldn’t have managed this as the .promo class also carried a lot of box model; by abstracting our code into single responsibilities we can pick and choose what we want to use and where a lot more easily."
All the Previous exemples and contents are from this great article by Harry Roberts, that I encourage you to read in full.

Core principles - Previous

Unifying ITCSS with ADS

Next - Core principles

Open / Close Principle (OCP)

Last modified 3yr ago

Copy link

Outline

Definition :

Let's take an exemple that does not follow the SRP :