In the series of posts on the CSS methodologies we will bring closer the ideas, concepts and discuss the use of specific examples.
The plan on CSS methodologies series is as follows:
- What are CSS methodologies and why is it worth using them?
- BEM
- OOCSS
- SMACSS
- Atomic Design
- Methodologies and Shadow DOM
What are CSS methodologies and why are they worth using?
When producing software as developers, we aim to create a code that will be:
- as simple as possible,
- expressing clearly the programmer’s intentions,
- easy to manage.
Therefore, tools have been created and disseminated to help in achieving this goal. Principles that satisfy good practices, such as SOLID, YAGNI, DRY, design patterns (creational, structural, behavioral), and above all programming paradigms, such as functional programming or object programming.
In the work of Frontend Developer we deal not only with the pure programming language, which is JavaScript, but also with the HTML markup language and the CSS stylesheet.
HTML Standards
In the case of HTML, we can strictly rely on guidelines regarding, among others, semantics or the use of specific tags. All information is contained in the HTML standard published by WHATWG or based in the W3C documents. In addition, W3C provides an HTML code validator that allows you to check compliance with the latest standard. Writing in accordance with the guidelines greatly contributes to the creation of good, reusable code.
There are also standards for CSS style sheets. Unfortunately there is a great deal of freedom in writing styles or the way code is organized. And with the freedom comes also responsibilities and dangers. A lot of attention should be paid to the code being written in a transparent and reusable way, which is not a simple matter, especially in large projects.
Three important features
CSS has three features that need to be mentioned before we go on into specific methodologies. They are of great importance for the sense of introducing methodologies. The first one is specificity. This is what decides which set of rules will be applied to the given element. For example, the rules assigned to the ID selector are more important than those assigned to the class. These in turn are more important than those assigned to the regular HTML tag. The individual specificity values for selectors are shown in the following table:
| Inline styling | 1000 |
| ID | 100 |
| Class | 10 |
| Attribute | 10 |
| Pseudo-class | 10 |
| HTML tag | 1 |
| Pseudo-element | 1 |
| Universal | 0 |
In addition, there is also an !important declaration. When used with a particular rule, it results in ignoring the specificity value and applies this rule.
Let’s take a look at the HTML code illustrating this issue:
<p id="paragraph-id" class="paragraph-class">
Lorem ipsum...
</p>
and styles:
#paragraph-id {
font-size: 20px;
}
.paragraph-class {
font-size: 16px;
}
p {
font-size: 12px;
}
The paragraph to which we applied styles will have a font size of 20px, because the styles assigned to the ID selector are the most important.
Nesting of selectors
The second feature is nesting of selectors. It is closely related to the first. It’s because specificity increases with the increase of nesting in an additive manner. Let’s take a look at the following HTML code:
<div class="container">
<p class="paragraph">
Lorem ipsum...
</p>
</div>
along with the styles:
.container > p {
font-size: 14px;
}
.paragraph {
font-size: 20px;
}
Although the class selector has a higher specificity than the marker itself (10 to 1), in combination with the parent class selector, the result changes (10 to 10 + 1). This means that the text will have 14px. While in this case you can quickly determine which rules will be applied, it is rather not our intention to have this font size, since we have used a special class for the paragraph. As we can see, it is very easy to lead to a situation in which we will have to think what transpires styles from our chosen class.
The third feature to keep in mind is the order of applying styles in a CSS file. Each set of rules has a global scope, that is, it is included in the entire styling application. In a situation where two sets with the same specificity value will be applied to a given HTML tag, the styles from this set will be used, which was introduced later on (you can see it below in the code). The following code illustrates the situation:
<p class="paragraph large-text">
Lorem ipsum...
</p>
.large-text {
font-size: 20px;
}
.paragraph {
font-size: 14px;
}
The result will be a text with a font size of 14px.
In conclusion
These three CSS properties give us a lot of ways to manipulate the code or override rules in a very simple way. However, the simplicity of these operations doesn’t translate to the readability of the code and its reusability, not to mention management. For small (to medium) applications, too loose usage of CSS is not a big source of potential problems. However for large projects the CSS file grows significantly, and management can be difficult.
Here the CSS methodologies (collections of formalized rules of CSS code writing) help to make it easy to manage, understand, flexible to change and above all – reusable. There are several methodologies, and they will be presented on our blog: BEM, OOCSS, SMACSS, Atomic Design – and I will describe each of them in detail in the following articles.