CSSはBEM命名規則の実践を使用する

<!--
    良い
-->
< div クラス = "ヘッダー" > </ div >

<!--
    悪い
    赤い文字は外観を説明するものです -->
< div クラス = "red-text" > </ div >

<!-- ブロック `search-form` -->
<form class="検索フォーム">
    <!-- `search-form` ブロック内の `input button` 要素 -->
    <input class="検索フォーム__input">
    <button class="search-form__button">検索</button>
</フォーム>

<!--
    良い
    `block-name__element-name` に従ってください
-->
<form class="検索フォーム">
    <div class="検索フォーム__コンテンツ">
        <input class="検索フォーム__input">
        <button class="search-form__button">検索</button>
    </div>
</フォーム>

<!--
    悪い
    'search-form__content__button' は `block-name__element-name` の後に続きません
-->
<form class="検索フォーム">
    <div class="検索フォーム__コンテンツ">
        <input class="検索フォーム__content__input">
        <button class="search-form__content__button">検索</button>
    </div>
</フォーム>

<form class="検索フォーム">
    <!-- 
        良い
        要素はブロック検索フォーム内にあります -->
    <input class="検索フォーム__input">
    <button class="search-form__button">検索</button>
</フォーム>

<form class="検索フォーム"></form>
<!--
    悪い 
    要素はブロック検索フォーム内にありません -->
<input class="検索フォーム__input">
<button class="search-form__button">検索</button>

<form class="検索フォーム 検索フォーム_focused">
    <input class="検索フォーム__input">

    <!-- 'disabled' は 'button' の要素です -->
    <button class="search-form__button search-form__button_disabled">検索</button>
</フォーム>

<form class="検索フォーム 検索フォーム_テーマ_islands">
    <input class="検索フォーム__input">

    <!-- 
        良い
        `button` の修飾子 `size` の値は `m` です 
    -->
    <button class="search-form__button search-form__button_size_m">検索</button>
</フォーム>

<form class="検索フォーム
             検索フォーム_テーマ_島
             検索フォームテーマlite">
    <input class="検索フォーム__input">

    <!-- 
        悪い
        同じ修飾子の2つの異なる値を同時に使用することはできません -->
    <button class="検索フォーム__button
                   検索フォーム__ボタンサイズ_s
                   検索フォーム__button_size_m">
   </ボタン>
</フォーム>

<!--
    良い
-->
<form class="検索フォーム 検索フォーム_テーマ_islands">
    <input class="検索フォーム__input">
    <button class="search-form__button">検索</button>
</フォーム>

<!-- 
    悪い
    ブロック名「search-form」がありません 
-->
<form class="search-form_theme_islands">
    <input class="検索フォーム__input">
    <button class="search-form__button">検索</button>
</フォーム>

。隠れる {
    表示: なし !重要;
}

<div class="van-doc">
    <div class="van-doc-header">
        <div class="van-doc-row">
            <div class="van-doc-header__top">
                <a class="van-doc-header__logo">検索</a>
                <ul class="van-doc-header__top-nav">
                    <li class="van-doc-header__top-nav-item">
                        <a class="van-doc-header__logo-link">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="van-doc-container van-doc-row van-doc-container--シミュレータ付き">
        ......
    </div>
</div>

<div class="ページボタンjs_show">
    <div class="page__hd">
        <h1 class="page__title">ボタン</h1>
        <p class="page__desc">ボタン</p>
    </div>
    <div class="page__bd">

        <div class="button-sp-area">
            <a class="weui-btn weui-btn_primary">ページのメイン操作</a>
            <a class="weui-btn weui-btn_loading">ページのメイン操作</a>
            <a class="weui-btn weui-btn_disabled>ページのメイン操作</a>
            <a class="weui-btn weui-btn_default">ページの二次操作</a>
            <a class="weui-btn weui-btn_warn">警告操作</a>
        </div>
        ....
        <div class="button-sp-area セル">