A detailed explanation of layer separation programming in CSS

With the development of CSS, the use of CSS Semantic naming convention and the separation of CSS layer, will help its scalability, performance improvement and the organization of Code management.

Many of the questions about CSS in my previous article can be avoided by using an appropriate CSS policy. In this article, I will focus on the benefits of using a method or a naming convention.

There are a lot of front-end methods and naming conventions to use, each with its own pros and cons. In almost all cases, CSS is split into more manageable code "blocks". This split way of CSS defines each method.

Naming rules

The importance of a reliable naming convention cannot be ignored. As with the benefits of organizational structure, there are a number of performance advantages that allow you to consistently and responsibly name your selector.

Proper use of any rule will play a key role in reducing the concerns associated with CSS in large projects

BEM

One of the most popular naming conventions is BEM (block: blocks, element: elements, Modifier: modifiers). By adding its parent block module to each element as a prefix, the security of the target becomes simpler. BEM also helps to eliminate the page and body class dependencies on nested or additional styles.

CSS code copy content to clipboard

. Block {}

. block__element {}

. Block--modifier {}

The example above shows the class structure of a BEM project, where the underscore (__) is used to differentiate elements, while hyphens (--) are used to modify elements. Here's a real-world example ...

CSS code copy content to clipboard

. Product-details {}

. Product-details__price {}

. Product-details__price--sale {}

One of the traps in BEM is to lure style classes that add multiple uses to the cosmetic section. Large, small, green, or eye-catching, and other cosmetic selectors are proposed to be introduced into the tag, which will change in the near future.

CSS code copy content to clipboard

. Product-details {}

. Product-details__title {}

. Product-details__title--small {}

Like most multi-purpose classes, the intent at the beginning of a project is obvious, but when a design changes, it often leads to contradictory CSS.

SUIT

Suit originates from BEM, but it distinguishes components from their grooming and future generations by using hump and hyphen for component names.

CSS code copy content to clipboard

. u-utility {}

. ComponentName {}

. Componentname--modifiername {}

. Componentname-descendantname {}

. Componentname.is-somestate {}

The selector is more readable by eliminating potentially confusing hyphenation symbol connection element names.

CSS code copy content to clipboard

. ProductDetails {}

. Productdetails-price {}

. Productdetails-title--sale {}

Plus prefix

If you don't want to use such a strict or complex naming convention, adding a prefix to each selector can also achieve this.

CSS code copy content to clipboard

. S-product-details {}

. T-product-details {}

. Js-product-details {}

This approach makes it easy to identify structural classes in the representation class but simply write and understand them. The structure properties in the above example will be applied to the s-product-details selector. The theme properties apply to the T-product-details selector.

Elements can be defined or used in the same way as base classes and cosmetic classes ...

xml/html code to copy content to clipboard

　　Button

　　Checkout Button

　　Search Button

Adding a prefix to the sass partials is helpful in locating a large project file when removing the necessary storage partials in a folder. This method is used in Itcss.

You choose nothing, it's important to remember your choices and apply them throughout the project.

Method

As the naming rules increase, CSS becomes more secure and more efficient. Due to smaller CSS files and fewer weight problems, the required nesting selector will be reduced.

Despite these improvements you can still use the copied CSS to complete the style like the following example.

CSS code copy content to clipboard

. product-details__title {

font-family: ' Helvetica neue ', Helvetica, Arial, Sans-serif;

Text-transform:uppercase;

Color: #333;

}

. latest-news__title {

font-family: ' Helvetica neue ', Helvetica, Arial, Sans-serif;

Text-transform:uppercase;

Color: #FF0000;

}

This is how the front-end approach comes in, and dividing your CSS hierarchy will help prevent duplicate styles and large groupings of selectors. Common or underlying styles are defined separately, while more specific or decorated styles are added to the top of the inherited style.

Oocss

Object-oriented CSS has two main principles first, the performance is separated from the structure, and the second is the separation of the container from the content. These two principles are designed to improve performance by creating reusable CSS modules.

Separation of performance from structure:

CSS code copy content to clipboard

　　

　　

. product-image {

width:400px;

Overflow:hidden;

}

. product-description {

width:500px;

min-height:200px;

Overflow:auto;

}

. box-padded {

Background: #FFF;

padding:10px;

}

```

Content is separated from container:

CSS code copy content to clipboard

　　

　　

. wrapper {

width:400px;

margin:0 Auto;

Overflow:hidden;

}

. recently-viewed {

Border:solid 1px #ccc;

Background: #FFF;

color:￡666;

}

. suggested-products {

Border:solid 1px #ccc;

Background: #FFF;

color:￡666;

}

This object-oriented approach creates a series of versatile classes that you can use to set CSS properties. This way of working can improve site performance and maintenance and maintain the dry principle of CSS files.

Even if multiple themes of the tag are consistent, an object-oriented method can add corrective css to overwrite or delete unwanted inheritance styles.

CSS code copy content to clipboard

Product-delivry.padded-box {

padding:0

}

Smacss

Smacss, like Oocss, is based on reduced repetition styles. However, Smacss uses a set of five tiers to divide the CSS into a more structured approach to the project.

base-html Elements & Defaults

Layout-page structure

Module-re-usable Code Bloks

State-active/inactive etc

Theme-typography and colour schemes etc

This increased organization and structure improves the efficiency of the output CSS. This approach also applies to places where you need to add or remove layers.

Itcss

Itcss is a completely different approach to SMACSS, creating a series of tiers to manage dependencies and promote scalability. The base level includes universal and broad selectors. The top level contains a selector for the local module materialization. The whole set of levels are as follows ...

Tools?—? Default Mixins & Functions

Generic?—? Normalize, resets, box-sizing

Base?—? HTML elements

Objects?—? Design Patterns

Components?—? Modules & Blocks of code

Trumps?—? Helpers & Overrides

Additional weights for each level are allowed only to add extra requirements.

In the same example above, CSS will be divided into the base layer and the component layer.

CSS code copy content to clipboard

p {

font-family: ' Helvetica neue ', Helvetica, Arial, Sans-serif;

font-size:14px;

}

. product-details__title {

Color: #333;

}

. latest-news__title {

Color: #FF0000;

}

Please note before use

You can only decide to use one of these strategies, but you don't have to rely on it all. If a level doesn't fit your project then don't use it. You can also change or add something to fit the needs of your project and your team. Naming rules or methods does not fit all items 100% at a time.

You can also create your own method or naming convention that allows a tailored solution to fit your project's needs perfectly. One disadvantage of a custom solution is the lack of community support and documentation.