為什么要分層？

SMACSS

BEM

SUIT

ACSS

原因

CSS有語義化的命名約定和CSS層的分離，將有助于它的可擴展性，性能的提高和代碼的組織管理

大量的樣式，覆蓋、權重和很多!important，分好層可以讓團隊命名統一規范，方便維護

有責任感的去命名你的選擇器

SMACSS

SMACSS(Scalable and Modular Architecture for CSS 可擴展的模塊化架構的CSS)像OOCSS一樣以減少重復樣式為基礎。然而SMACSS使用一套五個層次來劃分CSS給項目帶來更結構化的方法：

Base 設定標簽元素的預設值 PS：html{} input[type=text]{}

Layout 整個網站的 ‘大架構’ 的外觀 PS：#header{margin: 30px 0;}

Module 應用在不同頁面公共模塊 PS：.button{}

State 定義元素不同的狀態 PS：.nav-main{}

Theme 畫面上所有 ‘主視覺’ 的定義 PS：border-color、background-image

BEM(不是說都要加下劃線，主要針對的是整體)

BEM和SMACSS非常類似，主要用來如何給項目命名。一個簡單命名更容易讓別人一起工作。比如選項卡是一個塊(Block)，這個塊里的元素是標簽之一(Element)，而當前選項卡是一個修飾狀態(Modifier)：

block 代表了更高級別的抽象或組件

block__element 代表.block的后臺，用于形成一個完整的.block整體。

.block--modifier 代表.block的不同狀態或不同版本。

修飾符使用的是，子模塊使用_符號。

BEM

SUIT

SUIT起源于BEM，但是它對組件名使用駝峰式和連字號把組件從他們的修飾和子孫后代中區分出來：

修飾符使用的是,子模塊使用_符號。

SUIT

如果你不想使用如此嚴格或者復雜的命名規則，給每一個選擇器前加前綴同樣可以達到這樣的效果。

.s-product-detauils{}

.t-product-detauils{}

.js-product-detauils{}

結構屬性將會被應用到s-product-details選擇器中。主題屬性將應用于t-product-details選擇器。

ACSS

考慮如何設計一個系統的接口。原子(Atoms)是創建一個區塊的最基本的特質，比如說表單按鈕。分子(Molecules)是很多個原子(Atoms)的組合，比如說一個表單中包含了一個標簽，輸入框和按鈕。生物(Organisms)是眾多分子(Molecules)的組合物，比如一個網站的頂部區域，他包含了網站的標題、導航等。而模板(Templates)又是眾多生物(Organisms)的結合體。比如一個網站頁面的布局。而最后的頁面就是特殊的模板。

ACSS

ITCSS

Settings 全局可用配置，設置開關。$color-ui:#BADA55;$spacing-unit:10px;

Tools通用工具函數。@mixin font-color(){font-color:$color-ui;}

Generic 通用基礎樣式。Normalize，reset，boxsizing:border-box;

Base 未歸類的html元素。ul{list-style: square outside;}

Objects設計部分開始使用專用類。.ul-list__item{padding:$spacing-unit};

Components 設計符合你們的組件.products-list{@include font-brand();border-top:1px solid $color-ui;}

Trumps 重寫，只影響一塊的DOM。(通常帶上我們的!important)(比如只有顏色不一樣)

最后我列出一些我將要用到的技巧，并且堅持做下去：

盡量不讓自己的樣式層級超過三層

盡量不使用!important，通過添加和使用類名，比如.hidden類名

盡量遠離Sass中介紹@extend的一般經驗法則——他們有些是迷惑人

盡量在樣式表中添加注釋

讓團隊寫CSS有一個標準規范——Harry Roberts寫了一個很有名的CSS指南

此外，應該有一個可以展示元素樣式的模塊庫

使用類似scss-lint工具，讓你的SCSS/CSS和規范保持一致

盡量不要使用*這樣的全局選擇器

JavaScript鉤子是使用的類名，盡量加上前綴js-

盡量在項目中重復使用類名和模塊

取名盡量和Bootstrap框架的組件接近

在樣式中避免使用#id

擴展閱讀：

www.leemunroe.com/css

https://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html

eslint: https://www.jianshu.com/p/2bcdce1dc8d4

總結

以上是生活随笔為你收集整理的怎么在css中加横线分层,CSS分层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。