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

標題

搜尋 搜尋1 搜尋

    <!-- 塊中可巢狀著另一個塊 -->
    <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 {}