CSS Naming conventions

With the development of CSS, the use of CSS has semantic naming conventions and CSS layer separation, will help its extensibility, performance improvement and code organization and management.

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

There are many front-end methods and naming conventions available for use, each with its own pros and cons. In almost all cases, CSS is split into a more manageable code "block". This kind of partitioning of CSS defines each method.

Naming rules

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

Proper use of any rule will play a key role in reducing CSS-related concerns in large projects

BEM

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

.block {}.block__element {}.block--modifier {}

The example above shows the class structure of a BEM project, which is __ used to distinguish elements, and the hyphen ( -- ) is used to modify the elements. Here is a real-world example ...

.product-details {}.product-details__price {}.product-details__price--sale {}

A trap in BEM is a style class that lures you to add multiple uses to the cosmetic section. Large, small, green, or eye-catching selectors are introduced into the markup, which will change in the near future.

.product-details {}.product-details__title {}.product-details__title--small {}

Like most multipurpose classes, the intent is obvious at the beginning of a project, but when a design changes, it often leads to conflicting CSS.

Extended Reading

• BEM Chinese Information
• BEM Official website
• Get BEM
• BEM 101
• Working with BEM @ scale-advice from TOP developers
• Block, Element, modifying Your JavaScript components
• A New Front-End Methodology:bem
• Mindbemding–getting your head ' round BEM syntax
• Block, Element, Modifier
• Bem:the Block, Element, Modifier approach to decoupling HTML and CSS
• An Introduction to the BEM methodology

SUIT

Suit originates from BEM, but it uses camel and hyphen for component names to differentiate components from their grooming and future generations.

. u-utility{} {}{}< span class= "rule" > {}< span class= "rule" > .is-somestate {< span class= "rule" >}            

Make selectors more readable by eliminating potentially confusing hyphenation symbols to connect element names.

.ProductDetails {}.ProductDetails-price {}.ProductDetails-title--sale {}

Extended Reading

• SUIT CSS
• Introduction to SUIT CSS
• Modular CSS with SUIT CSS
• Nicolas GALLAGHER-CSS Application Architecture

Add prefix

If you do not want to use such strict or complex naming conventions, adding a prefix to each selector can also achieve this effect.

.s-product-details {}.t-product-details {}.js-product-details {}

This method makes it easy to identify the structure class in the representation class but simply writes and understands it. The structure properties in the example above will be applied to the s-product-details selector. The theme properties are applied to the t-product-details selector.

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

<buttonclass= "button" >button</ button>< button class=  "button Button-checkout" >checkout button</button><button class=  "button Button-search" >search button</ BUTTON>            

On the one hand, it Sass partials partials is helpful to locate a large project file when you delete the necessary storage in the folder by adding a prefix in the. This method is used ITCSS in.

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

Method

With the addition of naming rules, CSS becomes more secure and more efficient. Because of the smaller CSS files and fewer weight problems, the required nesting selectors will be reduced.

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;             /span>                

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

Oocss

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

Performance and structure separation:

< div class= "box-padded Product-image "></div>< span class= "tag" ><div class= "box-padded Product-description" > </div>.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:

<div class= "wrapper recently-viewed "></div>< span class= "tag" ><div class= "wrapper suggested-products" > </div>.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 you can use to set CSS properties. This way of working can improve site performance and maintenance, as well as maintain the dry principle of CSS files.

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

product-delivry.padded-box { padding:0}

Smacss

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

Base - HTML elements & defaultsLayout -Page structure Module - Re-usable code bloksState - Active/Inactive etcTheme - Typography and colour schemes etc

This increased organization and structure improves the efficiency of the output of the CSS. The same approach applies to places where layers need to be added or deleted.

Itcss

Itcss is a completely different approach from SMACSS, which creates a series of hierarchies to manage dependencies and promote extensibility. The underlying hierarchy consists of a generic and broad selection of selectors. The top level contains a selector for the partial module materialization. The complete 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

Each level increases the weight, allowing only additional requirements to be added.

In 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 {< span class= "attribute" >color:   #FF0000; }         /span>                

Extended Reading

• Itcss
• Manage large-scale Web projects with new CSS architecture Itcss
• Mastering Css:bem and Itcss
• Writing CSS with Itcss
• Manage Large CSS Projects with Itcss
• Managing CSS Projects with Itcss

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 adapt it to the needs of your project and your team. Naming the rules or methods is not always 100% suitable for all projects.

You can also create your own methods or naming conventions, allowing a tailor-made solution to perfectly fit your project's needs. One disadvantage of custom solutions is the lack of community support and documentation.

Article Source: http://www.w3cplus.com/css/css-layers.html

CSS Naming conventions