用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 {}