CSS-With-BEM

时间:2021-07-23 05:27:52

Naming rules

block_name__element_name--modifier_name-modifier_value

  • Names are written in lowercase Latin letters.

  • Words are separated by a underscore (_).

  • The block name defines the namespace for its elements and modifiers.

  • The element name is separated from the block name by a double underscore (__).

  • The modifier name is separated from the block or element name by a double dashes (--).

  • The modifier value is separated from the modifier name by a single dash (-).

  • For boolean modifiers, the value is not included in the name (--disabled).

HTML FOR CSS

Positioning a block relative to other blocks

To set a block relative to other blocks,the best approach is usually to use a mix.

HTML implementation

<body class="page">
<header class="header page__header">header</header>
<footer class="footer page__footer">footer</footer>
</body>

CSS implementation

    .page {color: #000;}
.header {color: #000;}
.footer {color: #000;}
.page__header {color: #000;}
.page__footer {color: #000;}

Positioning elements inside a block

The position of nested HTML elements is usually set by creating an additional block element (for example, block__inner ).

<body class="page">
<div class="page__inner">
<!-- header-->
<header class="header">...</header> <!-- footer -->
<footer class="footer">...</footer>
</div>
</body>
.page__inner {
margin-right: auto;
margin-left: auto;
width: 960px;
}

相关文章