preface

Front-end development regardless of Web or H5 will involve a variety of specifications, scaffolding use specifications, directory specifications, naming specifications, document specifications, process specifications and so on, this paper mainly for front-end naming specifications dom element name (className) naming specifications put forward some personal ideas, hoping to bring help or inspiration to readers.

Mainstream naming conventions

1. OOCSS

An example of the object-oriented CSS:

<div class="sizeOne bgBlue solidGray"></div> .sizeOne {width: 25%; } .bgBlue {background:blue; } .solidGray {border: 1px solid #ccc; }Copy the code

Core principles of OOCSS:

  1. Independent structure and style
  2. Separate containers and contents

Its advantages:

  • Reduce CSS code
  • Clean HTML tags, semantic class names, logical hierarchies
  • Semantic markup helps SEO
  • Better page optimization, faster load time (because there is a lot of component reuse)
  • With extensible markup and CSS styles, more components can be put into the library without affecting other components
  • Easily construct new page layouts or create new page styles

Its drawbacks:

  • OOCSS is suitable for truly large web sites because large web sites use a lot of reusable components that might not work in small projects. So using OOCSS or not should depend on your project.
  • If not used wisely, creating components can be a mess, a mess, an unexpected maintenance disaster, or a maintenance nightmare.
  • Best for each component for writing a documentation, help to call and maintenance reference links: www.w3cplus.com/css/oocss-c…

2. SMACSS

Reference link: medium.com/savemuse/s…

3. SUITCSS

Reference link: w3ctech.com/topic/1939

4. Atomic

Refer to the link: www.geeksforgeeks.org/introductio…

5. BEM

Reference link: getbem.com/introductio…

Block, Element, Modifier, BEM is the naming method I am currently using, which is also the focus of this article. Based on the SPECIFICATION of BEM, a set of specifications in line with the business, framework and development mode has been developed. First, a brief introduction to BEM can be found at the reference link.

Block

An independent meaningful entity, eg:

Header, Container, Menu, Checkbox, Input, footer, etc., are separate modules in the layout of the entire page.

Element

Element, which is a child of a Block, has no independent meaning but is part of the Block, eg:

Menu item, List item, Checkbox Caption, header title

Modifier

A marker on a Block or Element that changes appearance, state, behavior, markup, etc., eg:

Disabled, highlighted, checked, fixed, size big, color yellow

My naming conventions

Based on BEM, I made an extension. I think the project name can also be a Block, and the pages and components under the project can be regarded as elements under the Block. The project is an independent entity, and components and pages are part of it. This concept fully conforms to the design concept of BEM and is also suitable for our project development.

When we use Vue, React, or Angular for business development, these concepts come into play:

  1. Page-level components;
  2. Global generic components;
  3. General components within the module;
  4. Page-specific components;

For these scenarios, how can we name and differentiate so that we can get a general idea of the purpose of the component from the class name, or even self-comment, while effectively preventing style conflicts caused by naming repetition?

1. Page-level components

The page to which the route corresponds is also called a page-level component.

< project abbreviation >__< page >--page eg: Project: Taobao Personal Center; Page: My order; Name: tpc__my - the orders - pageCopy the code

2. Global generic components

A globally generic component that applies to multiple pages under different modules.

< project abbreviation >__< component name >--global-component EG: project: Taobao Personal Center generic component: button component name: tpc__button--global-componentCopy the code

3. Common components in the module

A component that is used by multiple pages within a module, which I call a generic component within a module.

< Project abbreviation >__< component name >--module-component EG: Project: Taobao Personal Center module common components: popup component name: tpc__modal--module-componentCopy the code

4. Page-specific components

A component that applies only to the current page, which I call a page-specific component.

< project abbreviation >__< component name >--component EG: Project: Generic component in Taobao Personal Center module: Tag component name: tpc__tag--componentCopy the code

Add modifier: Page, global-Component, Module-Component, and Component.

Component names, module names, and page names are all connected with ‘-‘, eg: Record-item, award-detail.

All of the above names are for the class names of the component container. How do you name the child elements inside the component?

1. Use a unified prefix

All child elements are named with the same prefix, eg: tpc__button__text.

The disadvantage of this method is that if the component name is long, it looks inelegant and a lot of repetition, if variable definitions are used, eg:

const classPrefix = 'tpc_datetime-picker'

<div className={`${classPrefix}__title`} />
Copy the code

It doesn’t always feel very elegant, but it’s still acceptable.

2. Use the component name prefix

Use component names without project abbreviations, eg: button–disabled

For naming inside child elements, eg: button__label–warning

During component development, it is recommended that prefixes be stored in variables, as is CSS. Naming your classes this way is both straightforward and prevents naming repetition from causing style conflicts, making each class more meaningful. Some front-end may be more antipathetic naming, like to use a short name, you can appropriately adjust the prefix of the class name, so that the class does not appear too long, so named, prevent repetition, class name is very readable, will make your business more clear, HTML structure level is also more clear.