This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.
In this article, I'm going to discuss three successful approaches to CSS architecture, their principles, goals and advantages.
Why Can CSS Code Spiral Out of Control?
Keeping CSS code lean, re-usable and maintainable is notoriously hard. If you neglect to enforce any coding and organizational rules in a consistent way, this can be the case both for small and medium to big projects, where more than one developer is at work.
Where the codebase is large, goes through a number of changes over time, and organization is lacking, it often happens that teams prefer to add new style rules at the end of the style sheet document rather than remove chunks of it or modify what's already there. The main reason is often that the effects of editing or removing CSS declarations can be unpredictable and risk breaking the design somewhere in the project. This is a losing strategy, which can lead to code duplication, specificity issues where overriding style rules turns into a battle, and overall bloat.
Most often than not, choosing the methodology that most suits your needs is an iterative process, which starts with getting familiar with what's already out there.
Here are three methodological approaches to help you fight the challenges of a messy style sheet.
BEM
BEM stands for Block-Element-Modifier. It is a methodology for architecting CSS created by Yandex.
The goal of the BEM methodology is
to develop sites which should be launched fast and supported for a long time. It helps to create extendable and reusable interface components.
The key concepts here are easy project maintenance over time, and components reusability.
The core BEM strategy consists in organizing CSS code into reusable modules with the help of a smart naming convention. Let's have a closer look.
What Is a Block?
Identifying blocks is a crucial step of applying the BEM methodology. A block is a
functionally independent page component that can be reused. In HTML, blocks are represented by the class attribute.
When deciding what to consider a block, ask yourself if you can easily remove that portion of code and use it somewhere else. For instance, you can consider a website header or footer to be a block.
You can safely nest blocks, for instance, you can place a menu block inside a header block.
[code language="html"]
<header>
<ul class="menu">
<!-- menu items here -->
</ul>
</header>
[/code]
Because in principle you should be able to reuse blocks anywhere in your page, your CSS for the block should not set any margins or positioning rules.
Finally, when choosing a name, make sure the name describes what the block is for, what its purpose is, never what its appearance or state is. In other words, its name should answer the question: What is it? (e.g., a header, a menu, etc.), not What does it look like? (e.g., fixed header, small menu, etc.).
What Is an Element?
According to the BEM methodology, an Element is
A part of a block that has no standalone meaning and is semantically tied to its block.
Here are a few principles applying to elements:
- Elements only live inside a block
- Elements cannot belong to other elements, they can only be part of a block
- You can build nested elements
- Element names describe their purpose, not their appearance
- When naming elements, you need to follow this conventions:
block__element
What Is a Modifier?
A Modifier is
An entity that defines the appearance, state, or behavior of a block or element.
For instance, a header block can be fixed to the top of the page, an accordion block can be open or closed, a button block can be disabled, etc.
The BEM naming convention for modifiers looks like this: block__element_modifier.
This is the core of the BEM methodology. In addition, BEM offers principles of file structure organization, a suite of tools, and a lively community for support.
Pros of Using BEM
These are some advantages of using BEM in your projects
- New developers can quickly understand the relationship between a component in markup and CSS rules
- It facilitates productivity in teams. The benefit is especially noticeable when working on larger projects
- The naming convention reduces the risks of class name collisions and style leaks
- CSS is not closely tied to the markup in a specific location inside the page
- CSS is highly reusable
SMACSS
Scalable and Modular Architecture for CSS, or SMACSS, is a web development methodology for organizing and writing CSS code. Its creator, Jonathan Snook, describes it as follows:
SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
At its core is a way of categorizing CSS rules. Categorization brings forth patterns, i.e., things you see repeated more than once in the design, around which you can work out guidelines for coding maintainable and reusable CSS.
Continue reading %Tame Unruly Style Sheets With These Three CSS Methodologies%
by Maria Antonietta Perna via SitePoint
No comments:
Post a Comment