Tame Unruly Style Sheets With These Three CSS Methodologies

This article is part of a series of articles in collaboration with SiteGround. Thank you for supporting the partners who made SitePoint possible.

This article will explore three successful CSS architecture methods, including their principles, goals and advantages.

Key Points

• BEM, SMACSS and ECSS are three methods for managing CSS architectures, each with its own principles, goals and advantages.
• BEM (Block-Element-Modifier) ​​focuses on the long-term easy maintenance of reusability of projects and components, using smart naming conventions to organize CSS code into reusable modules.
• SMACSS (Extensible and Modular CSS Architecture) classifies CSS rules to identify patterns and create guides for writing maintainable and reusable CSS, with flexible naming conventions that help code organization and team efficiency.
• ECSS (Permanent CSS) emphasizes isolation, encapsulating all the code needed to build each component in its own shared folder and using strict CSS naming conventions. In the long run, this approach supports easy maintenance and minimized file size increase.

Why does CSS code get out of control?

Keeping CSS code thin, reusable and maintainable is very difficult. This can happen in small, medium and large projects, especially in projects with multiple developers involved if you fail to execute any coding and organizational rules in a consistent manner. When the code base is large, undergoes many changes over time, and lacks organization, teams often prefer to add new style rules at the end of the stylesheet document rather than removing part of the code or modifying existing code. The main reason is often that the effect of editing or deleting CSS statements is unpredictable and can cause design breaks somewhere in the project. This is a failed strategy that leads to code duplication, priority issues (overriding style rules becomes a battle), and overall inflation. Typically, choosing the method that best suits your needs is an iterative process that starts with familiarizing yourself with existing methods. Here are three ways to help you deal with the challenges of messy style sheets.

BEM

BEM stands for block-element-modifier. It is an architectural method created by Yandex for building CSS. The goal of the BEM method is to develop a website that is quickly launched and long-term supported. It helps create extensible and reusable interface components. BEM website

The key concept here is the long-term ease of maintenance of projects and components reusability. The core strategy of BEM is to organize CSS code into reusable modules with the help of intelligent naming conventions. Let's take a closer look.

What is a block?

Identifying blocks is a key step in applying the BEM method. Block is a> functionally independent page component that can be reused. In HTML, blocks are represented by class attributes. BEM documentation.

When deciding what to treat as a block, ask yourself if you can easily delete that part of the code and use it elsewhere. For example, you can treat a website header or footer as a block. You can safely nest blocks, for example, you can place menu blocks inside header blocks.

<ul class="menu"></ul>

Because in principle you should be able to reuse blocks anywhere on the page, the CSS of the block should not set any margins or positioning rules. Finally, when selecting a name, make sure the name describes what the block is for, not how it looks or states. In other words, its name should answer this question: What is it? (e.g. header, menu, etc.), instead of What does it look like? (e.g., fixed header, small menu, etc.).

What are elements?

According to the BEM method, an element is part of a > block, which has no independent meaning and is semantically associated with its block. Get BEM

The following are some principles that apply to elements:

• Elements can only exist in blocks
• Elements cannot belong to other elements, they can only be part of the block
• You can build nested elements
• Element name describes its purpose, not its appearance.
When naming elements, you need to follow the following convention: block__element

What is a modifier?

Modifier is an entity that defines the appearance, state, or behavior of a block or element. BEM Documentation

For example, the header block can be

fixed at the top of the page, the accordion block can be on or off , the button block can be disabled , etc. . The naming convention for BEM modifiers is as follows: blockelementmodifier. This is the core of the BEM method. In addition, BEM also provides document structure organization principles, a set of tools and an active community to support it. Advantages of using BEM

The following are some of the advantages of using BEM in your project:

New developers can quickly understand the relationship between components in tags and CSS rules

• It promotes team productivity. This advantage is particularly obvious in large-scale projects
• Naming conventions reduce the risk of class name conflicts and style leakage
• CSS is not closely associated with markers in specific locations within the page
• CSS is highly reusable

SMACSS

Scalable and modular CSS architecture (SMACSS) is a web development method used to organize and write CSS code. Its creator Jonathan Snook describes it as follows: >SMACSS is a way to examine the design process and adapt these rigorous frameworks to flexible thinking processes. When using CSS, it attempts to document a consistent approach to site development. SMACSS website

Its core is to classify CSS rules. Classification brings patterns, where you repeat multiple times in your design, around which you can develop a guide to writing maintainable and reusable CSS. The core categories of SMACSS are:

• Basic — This category contains CSS rules that control the default appearance of elements. Selectors include single element selectors, attribute selectors, pseudo-class selectors, sibling selectors, etc. For example, html, body, a, a:hover, etc.
• Layout — This category is used to style pages that divide a page into sections.
• Module — Modules are designed reusable building block-style components such as menus, dialog boxes, search boxes, etc.
• Status — This category includes a description of the appearance of a layout or module in a specific state (e.g., visible or hidden, expanded or closed, etc.) or a specific view (e.g., home or internal page) style.
• Topic — This category is similar to state because it contains CSS rules responsible for layout and module appearance. Not all projects require this extra category, but it is always good to know its existence.

SMACSS naming convention

Related to the categories outlined above, SMACSS proposes a naming convention to help the productivity of code organization and development teams. Layout, state, and module rules are prefixed with meaningful names or abbreviations. For layout rules, such as layout-, grid- and even simple l- are acceptable prefixes. For state rules, the convention is to use is- as the state prefix, such as is-hidden, is-visible, etc. As for modules, just use the name of the component you are building, such as .menu, .dialog, etc. For example, to style the dialog that opens, you can use selectors like .dialog.is-open in CSS. Related elements within a module and variants of the same module should be prefixed with the basic name of the module. Also, try not to use ID, element selector, or nested selector. For example, to select a menu item within a module named menu, do not write a selector like this: .menu li a, but use something like .menu-link or .menu-item. Unlike BEM, SMACSS does not stipulate too strict naming conventions. Jonathan Snook made it clear: >…Don’t feel like you have to strictly follow these guidelines. Make an agreement, record it, and stick to it. SMACSS website

Advantages of using SMACSS

Some advantages of the SMACSS method for CSS encoding include:

• It provides effective guides for modular, maintainable CSS while avoiding being too strict
• You can quickly learn (and teach) SMACSS
• SMACSS naming conventions are not as verbose as BEM, and are easier to master in some ways
• It is flexible enough to be well used for large and small projects

ECSS

Permanent CSS or eCSS is a guide to writing stylesheets for large, fast-changing, long-standing web projects. eCSS website

This CSS approach really caught my great interest in its author Ben Frain’s original view of handling large-scale CSS challenges. The core concept of eCSS is isolation. Isolation means that each component is an independent unit of code, no dependencies, no context burden, reusable and removable without the risk of style leakage. This is mainly achieved by:

• Encapsulate all the code (not only CSS, but all the techniques needed to build each component) in its own shared folder.
• Every time you need a component similar to an existing component but with some variations, even if the variant is small, create a completely new component.
• Use strict CSS naming conventions

According to the second point above, it is obvious that repeating attributes and values ​​is not a problem for eCSS. In this regard, eCSS represents a fundamental difference from methods such as BEM and SMACSS, which extend or abstract existing components, thereby avoiding or avoiding code duplication as much as possible. Does this mean that eCSS will generate large stylesheet files? uncertain. After some testing with file compression, Ben Frain concluded that because "gzip is very efficient in compressing duplicate strings", the file size difference between using eCSS and other methods that tend to be abstract rather than duplicate is very good Small.

The benefits of using eCSS

The following are the benefits that can be obtained by applying the eCSS method and accepting its view of repetitiveness:

• CSS codes are easier to maintain by maintaining isolation of each visual mode
• While you will find duplicate properties and values, the file size increase is still small in the long run. This is because modules are self-contained, independent units, and you can quickly delete modules that you no longer need at any time without worrying about breaking the design
• All language/technical files required to create a module share the same folder, which makes it very easy to edit and physically delete content that is no longer needed.

You can read all the details of this innovative approach in Frain's book Persistence CSS.

Conclusion

Writing maintainable and well-organized CSS code is challenging. In this article, I introduce three ways to help with this task. This is by no means an exhaustive list, and none of these methods will solve all the problems you may encounter in your project. Just try it out and see what works for you. You can also try using BEM and SMACSS in combination, and even develop your own approach based on the set of questions you set yourself. What is your golden rule for writing well-organized, easy-to-manage CSS code? Do you think using CSS architecture approach can relieve the pain? Click the comment box to let me know.

Frequently Asked Questions about CSS Architecture Methods

What are the main differences between OOCSS, SMACSS and BEM methods?

OOCSS, SMACSS, and BEM are all CSS methods designed to help developers write clean, maintainable, and scalable CSS. OOCSS or object-oriented CSS encourages developers to write reusable, object-oriented code. It focuses on separating the structure from the appearance and separating the container from the content. SMACSS, or extensible and modular CSS architectures, provide guidance on classifying CSS rules to make your code more flexible and manageable. BEM or block element modifier is a naming convention that makes your CSS easier to read and understand. It divides the UI into separate blocks that can be reused and combined.

How to implement WordPress encoding standard in CSS?

WordPress has its own set of CSS coding standards to ensure consistency and readability between different projects. These standards include rules for naming conventions, indentations, spacing and comments. To implement these standards, you can use CSS lint tools with WordPress configuration, such as Stylelint.

What is the role of style sheets in web development?

Watch "Become a CSS Hero in the Office and create structured, maintainable and scalable CSS with CSS architecture"! Watch this course Stylesheet is a file or code form that defines the layout and design of a web page. It controls the visual rendering of HTML elements on the page, including layout, colors, fonts, and animations. CSS (Cascade Style Sheet) is the most commonly used style sheet language.

How does the CSS method improve my web design process?

The CSS method can greatly improve your web design process by making your CSS more organized, reusable and scalable. They provide a structured way to write CSS, which helps reduce the complexity of the code, make it easier to understand and maintain, and improve performance.

What are the best practices for writing CSS in HTML?

Best practices for writing CSS in HTML include separating styles from content using external stylesheets, using selectors efficiently, grouping related styles, using shorthand properties, and annotating code for clarity. It is also important to verify your CSS to make sure it is error-free and compatible with different browsers.

How to make my CSS code easier to maintain?

To make your CSS code easier to maintain, you can use CSS methods such as OOCSS, SMACSS, or BEM, which provide guides for building and organizing your code. Other strategies include modularizing CSS, using preprocessors like Sass or Less, and following naming conventions.

What are the advantages of using CSS preprocessors?

CSS preprocessors like Sass and Less allow you to use variables, nesting, mixins, and functions in CSS, which can make your code easier to read and maintain. They also allow you to write more concise and more powerful CSS.

How to make sure my CSS is compatible with different browsers?

To ensure that your CSS is compatible with different browsers, you can use a tool like Can I Use, which shows the compatibility of CSS properties in different browsers. For CSS attributes that are not fully supported by all browsers, it is also important to use vendor prefixes.

What is the importance of CSS in web design?

CSS is crucial in web design because it controls the visual presentation of content on a web page. It allows you to create visually appealing websites with consistent design and layout. It also allows you to adjust the presentation based on different types of devices such as desktops, tablets, and mobile phones.

How to learn more about CSS methods?

There are many resources to learn CSS methods online. SitePoint, Smashing Magazine, and Mozilla Developer Network provide in-depth articles and tutorials. You can also find online courses on platforms like Coursera and Udemy.

The above is the detailed content of Tame Unruly Style Sheets With These Three CSS Methodologies. For more information, please follow other related articles on the PHP Chinese website!