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

This article mainly shows you "what are the bem writing specifications in Css", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn "what are the bem writing specifications in Css"?

Bem is a component-based web development method. The idea is to separate the user interface into separate blocks, which makes it easier and faster to develop a complex UI interface, and reuses existing code without pasting and copying. BEM is composed of Block, Element and Modifier. The selector extends their relationship with the following connectors:

`_: double underscores are used to connect blocks and sub-elements of blocks

`: multiple words used only as hyphens, connecting blocks or elements or modifiers (can also be written directly as humps)

The state of a block or element that is connected by a double dash (can also be represented by'_ 'single underscore)

Example:

Block-name_modifier-nameblock-name__element-name--modifier-nameblock-name_modifier-name--modifier-valueblock-name__element-name--modifier-name--modifier-value

Basic concept

Block (block)

The code snippet may be reused and this code is available for Block without relying on other components. Blocks can be nested within each other, and any number of layers can be nested.

Features:

The name of the block describes its purpose. Such as menu, button

The block cannot affect the environment. This means that margin or position cannot be set for a block

Only class naming selectors can be used, not tags or id selectors

Does not depend on other blocks or elements in the page

Element (element)

Element is a part of Block and has no meaning to exist independently. Any Element is semantically bound to Block.

Features:

Connect with the block using'_'. Such as: block__item

Used to describe its purpose. Such as: item, text

Elements can be nested within each other, with any number of layers

The element is always part of the block. So naming like block__item1__item2 is illegal.

Modifier (modifier)

Modifier is a tag on Block or Element. Use them to change the style, behavior, or state. The connector with a block or element is'- -'.

Application

Relative to other Blocks positioning Block

The best way is to mix block and element. Solve the problem that margin and position cannot be set on block.

Example:

.. page__header {padding: 20px;} .page _ _ footer {padding: 50px;}

Block internal positioning Elements

Locate the nesting by creating additional child Element of Block.

Example:

... page _ _ inner {margin-right: auto; margin-left: auto; width: 960px;}

About naming

The naming of the selector must fully and accurately describe the BEM entity it represents.

Example:

.button {}. Button__icon {}. Button__text {}. Button_theme_islands {} we can direct us to deal with a block element. In html use such as:... However, the following css makes it difficult for us to make the same judgment: .button {}. Icon {}. Text {}. Theme_islands {} above is all the content of this article "what are the bem Writing specifications in Css?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.