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;

}

相关文章