用BEM命名規範組織CSS程式碼

而今才到當時錯發表於2018-04-26
CSS

在本規範中，以雙下劃線 __ 來作為塊和元素的間隔，以單下劃線 _ 來作為塊和修飾器 或 元素和修飾器 的間隔，以中劃線 - 來作為 塊|元素|修飾器 名稱中多個單詞的間隔

標題

    <!-- 塊中可巢狀著另一個塊 -->
    <p class="my-img">
        <img class="my-img__logo" src="abc.png" alt="image" title="image">
    </p>
     
</div>
複製程式碼
.................................... 在樣式檔案中，僅以類名作為選擇器，不使用ID或標籤名來約束選擇器，且CSS（或者SCSS編譯後的CSS）中的選擇器巢狀不超過2層，增加效率和複用性，減少選擇器之間的耦合度 ...................................................................... .search-form { position: relative; }

.search-form__input { font-size: 12px; }

.search-form__button_hover {}

/* 避免：避免使用不必要的巢狀（此處只是簡單的巢狀，沒有必要） */ .search-form__content-left .search-form__input {}

/* 稍好的巢狀（此處是在塊的theme1修飾器下的子元素，某些時候有必要） */ .search-form_theme1 .search-form__input {}

/* 錯誤：使用了標籤 */ button.search-form__button {} .search-form button {}

相關文章