CSS – this acronym hides a wealth of meanings. For example, we can find under it Counter-Strike: Source – the famous tactical first-person shooter. We also have Catalina Sky Survey – an American research program on the search for comets and asteroids that threaten Earth. Today, we won’t be talking about shooters or research programs. Today we are taking Cascading Style Sheets to the workshop.
Defining Cascading Style Sheets (CSS) most simply, we can say that it is used to set styles on web pages containing HTML or XML elements (in various variations). For example, we use it to change the background color, font size, font family, colors, and content spacing, divide it into multiple columns or add animations and other features.
CSS methodology is a set of guidelines for writing modular, reusable, and scalable code. Although CSS is an easy language to write, without an agreed-upon convention, the code becomes unreadable. It isn’t easy to move specific sequences around without spoiling the look of a website.
In the process, CSS methodologies do much more than fixing the CSS scalability problem. They make the design easier to create and iterate. They make front-end code easier to read and understand, provide ready documentation and make it easier for multiple people to collaborate on a project.
There are three most popular CSS methodologies.
Object-oriented CSS
Object-oriented CSS is a CSS methodology developed and promoted by Nicole Sullivan. OOCSS focuses on treating page elements as objects, giving all these objects classes, treating object classes as individual units in style sheets, and taking over from there.
Object-oriented CSSOOCSS distinguishes the concept of an „object” as a piece of HTML code (single elements or whole groups of them) with corresponding CSS classes and possibly some JavaScript code. Such objects can, of course, be reused in many places in the application. An example of such an object can be, for example, an input element with styles (including those responsible for validation errors) and validation on the JavaScript side. However, an object can also be a complete form, for example, related to Newsletter registration.
Therefore, such objects should be kept in mind already at the stage of designing the structure of the HTML document. From the beginning, you need to set your thinking in the right way, and there are two basic rules to help us with this:
- separation of structure from style
- separation of containers and content
.btn {
display: block;
text-align: center;
}
.btn-primary {
background: #ccc;
}
.btn-cancel: {
background: red;}
.btn-special: {
background: #000;
}
<button class=”btn btn-primary”>Submit</button>.
<button class=”btn btn-cancel”>Cancel</button>.
By assigning structured styles to elements, we define their overall appearance, and in addition, we can set their specific appearance as needed.
Scalable and modular architecture
SMACSS is a series of rules for categorizing CSS sets to make CSS code more organized, cleaner, scalable and modular. According to the SMACSS methodology, we can divide our CSS rule sets into five categories:
- Base
- Layout styles
- Modules
- States
- Themes
Scalable and modular architectureBase
All CSS rule sets that give HTML elements their default style are called base rules. Instead of using class or identifier selectors, we use element, attribute, pseudo-class, child, or sibling selectors to define these rule sets. We sometimes refer to these style rules as resets because they reset the default style of HTML elements.
Example:
html, body { margin: 0; paddin: 0; } /* reset */.
p { font-family: sans-serif; font-size: 12px; }
h1,h2,h3,h4,h5,h6 { font-family: serif; font-weight: normal; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 16px; }
h4 { font-size: 15px; }
Layout styles
Based on reuse, layout styles can be divided into primary and sub-styles. The main components define the page’s structure, including headers, footers, sidebars, content, etc. A page layout consists of several significant parts, called layout rules. Modules, however, are minor components that reside within the main features.
.header {
width: 100%;
}
.footer {
background: #000;
max-width: 1200px;
}
Modules
In CSS, modules are user interface components that are separate and distinct from each other. They are usually found in layout components but sometimes in other module components. They are not affected by other modules or user interface layouts. Examples include accordion, modal, dialog, or footer.
footer {
background: #000;
}
footer h1 {
font-family: Arial serif;
}
footer ul {
list-style: none;
}
State
CSS rule sets specify styles for different states of a component. They replace the default styling of the user interface module. For example, a message toast component can be in a successful or unsuccessful state, and we can display this in red or green. States are similar to modifiers in the BEM methodology.
.is-active {
display: block;
}
.is-collapsed {
display: none
}
Theme
The purpose of CSS rulesets for themes is to create theme-specific styles. Theme-specific properties mainly replace the default colors and images. They are optional. There is not always a need to use them in our projects.
SMACSS methodology does not, like BEM, for example, introduce some very sophisticated naming conventions. It is recommended to name the module classes without any prefixes, suffixes, etc.
Block Element Modifier
The name BEM comes from the English: „Block Element Modifier” and is an approach to creating modular CSS code. It is based on the division into elements: first, blocks – for example, a footer or menu. Second, elements – block elements such as an input or form button or a link in a menu. Third, modifiers – unique variants like input for entering a password, a „Subscribe” button, or an active link in a navigation menu.
Block Element ModifierNaming convention
In BEM, we have a specific naming convention for classes. I outline the general rules for this below:
.block – denotes the class of a given main block.
__element – a word preceded by two underscores indicating that it applies to a given block.
–modifier – a word preceded by two hyphens specifies the class that is the modifier in the given block.
<div class=”header”>
<div class=” header __one head__one–left”>(o)</div>.
<div class=” header __one head__one–right”>(o)</div>.
</div>
As you can see from the above example, the BEM methodology is all about dividing the Html code into blocks so that we can move the block around and nothing will crash on us.
Nomenclature
Like the other methodologies, BEM is a straightforward set of rules to follow when creating CSS styles. What I like about it is that it also introduces special nomenclatures. They may look rather bizarre at first glance, but I find it makes sense after thinking about them. And by using BEM, it will undoubtedly be easier for us to create reusable code that we can quickly move from place to place.
by