Shulou(Shulou.com)06/03 Report--

This article shows you the sample analysis of layer separation programming in CSS, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

With the development of CSS, the semantic naming convention of CSS and the separation of CSS layer will contribute to its scalability, performance improvement and code organization and management.

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

There are many front-end methods and naming conventions available, each with its own advantages and disadvantages. In almost all cases, CSS is split into more manageable code "blocks". This segmentation of CSS defines each method.

Naming rules

The importance of a reliable naming convention cannot be ignored. Just like the benefits of organizational structure, there are many performance advantages that allow you to name your selector persistently and responsibly.

The proper use of any rules will play a key role in reducing CSS-related concerns on large projects.

BEM

One of the most popular naming conventions is BEM (block: block, Element: element, Modifier: modifier). The security of the target is made easier by prefixing each element with its parent block module. BEM also helps eliminate the dependency of pages and body classes on nesting or additional styles.

.block {}

.block _ _ element {}

.block-- modifier {}

The above example shows the class structure of a BEM project where an underscore (_ _) is used to distinguish elements and a hyphen (- -) is used to modify elements. Here is an example of the real world.

. product-details {}

. product-details__price {}

. product-details__price--sale {}

One of the traps in BEM is to entice style classes with multiple uses to be added to the decorating section. Large, small, green or eye-catching modifier selectors are proposed to be introduced into the tag, which will change in the near future.

. product-details {}

. product-details__title {}

. product-details__title--small {}

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

SUIT

Suit originated from BEM, but it uses humps and hyphens for component names to distinguish components from their embellishments and descendants.

. u-utility {}

.ComponentName {}

.ComponentName-- modifierName {}

. ComponentName-descendantName {}

. ComponentName.is-someState {}

Make the selector more readable by eliminating the potential confusion of hyphenation element names.

.ProductDetails {}

. ProductDetails-price {}

.ProductDetails-title--sale {}

Add a prefix

If you don't want to use such strict or complex naming rules, prefix each selector to achieve the same effect.

.s-product-details {}

.t-product-details {}

.js-product-details {}

This method makes it easy to identify structural classes in representational classes but is simple to write and understand. The structure properties in the above example will be applied to the s-product-details selector. The theme property is applied to the t-product-details selector.

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

XML/HTML Code copies content to the clipboard

Button

Checkout Button

Search Button

On the one hand, adding a prefix to the Sass partials is helpful for locating a large project file when removing the necessary storage partials in the folder. This method is used in ITCSS.

There is no problem with what you choose. It is important to remember your choices and apply them to the entire project.

Method

As naming conventions increase, CSS becomes safer and more efficient. Due to smaller CSS files and fewer weight issues, fewer nested selectors are required.

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

. 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 where the front-end approach comes from, and dividing your CSS into layers will help prevent repetitive styles and large grouping selectors. Common or basic styles are defined separately, while more specific or modified styles are added to the top of inherited styles.

OOCSS

There are two main principles of object-oriented CSS: the first is the separation of presentation and structure, and the second is the separation of container and content. These two principles are designed to improve performance by creating reusable CSS modules.

Separation of performance and structure:

. 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 the container:

.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 multi-purpose classes that can be used to set the CSS property. This way of working can improve site performance and maintenance as well as maintain DRY principles for CSS files.

Even if multiple themes of the tag are consistent, an object-oriented method can add a corrected CSS to override or remove unwanted inheritance styles.

CSS Code copies content to the clipboard

Product-delivry.padded-box {

Padding:0

}

SMACSS

SMACSS, like OOCSS, is based on reducing repetitive styles. However, SMACSS uses a set of five levels to divide CSS to bring 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 added organization and structure improves the efficiency of the output CSS. This method also applies where hierarchies need to be added or removed.

ITCSS

ITCSS is a completely different approach from SMACSS, creating a series of layers to manage dependencies and promote extensibility. The basic level includes universal and extensive selectors. The top layer contains selectors for 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

The added weight of each level allows only additional requirements to be added.

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

P {

Font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif

Font-size: 14px

}

. product-details__title {

Color: # 333

}

. latest-news__title {

Color: # FF0000

}

Please pay attention before use

You can only decide to use one of these strategies, but you don't have to rely on it all. If a certain level is not suitable for your project, then do not use it. You can also change or add something to suit the needs of your project and team. Naming rules or methods are not 100% suitable for all projects all the time.

You can also create your own methods or naming conventions that allow a tailored solution to perfectly adapt to the needs of your project. One of the shortcomings of custom solutions is the lack of community support and documentation.

The above is the example analysis of layer separation programming in CSS. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.