組織CSS的方式有哪些

這篇文章將為大家詳細講解有關(guān)組織CSS的方式有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

OOCSS

OOCSS 意為面向?qū)ο蟮腃SS。這種方法有兩種主要 觀點:

• 結(jié)構(gòu)與設(shè)計分離

• 容器和內(nèi)容分離

使用這套結(jié)構(gòu)，開發(fā)者能得到可以在不同地方使用的一般類。

在這一步，會存在兩點（通常就好和壞）：

• 好: 通過重復(fù)利用減少代碼量 (DRY原則)。

• 壞: 組合使用。當(dāng)你改變一個特定元素的樣式, 你需要改變的很有可能不僅僅是CSS（因為大多是類都是公共的），而且還會添加新的類。

此外，這種OOCSS的方法本身并沒有明確的規(guī)則，而是抽象的建議，所以這種方法在生產(chǎn)中的結(jié)果會有不同。

實際結(jié)果就是，這種OOCSS的思想啟發(fā)了其他人創(chuàng)建出屬于他們自己更具體的代碼結(jié)構(gòu)。前端學(xué)習(xí)秋秋qun： 767273102  。有任何不明白的東西隨時來問我

SMACSS

SMACSS意為可擴展、模塊化（Scalable and Modular Architecture）的CSS。這種方法的主要目的是減少代碼量，并且使代碼維護更簡單。

Jonathan Snook將樣式分為了5個部分:

1. Base rules. 這些是主要的網(wǎng)頁元素樣式 - body, input, button, ul, ol等。在這部分, 我們主要使用
   HTML標簽和屬性選擇器, 特殊的情況下使用 - 類 (例如， 你有JavaScript的樣式選擇);

2. Layout rules. 這些是全局元素的樣式，比如<caption> <footer> <sidebar>的尺寸等。Jonathan建議在這些元素中使用id選擇器，因為這些元素在頁面中不會出現(xiàn)超過一次。然而，這篇文章的作者認為這并不是好的做法。(在樣式文件中，不管id什么時候出現(xiàn)，都會在其它的某個地方造成些麻煩).

3. Modules rules.在單個頁面中，塊會被多次使用。對于模塊的分類，并不建議使用id和標簽選擇器（分別為了重復(fù)使用和上下文獨立性）。

4. State rules. 在這一部分，規(guī)定了模塊的不同狀態(tài)和網(wǎng)頁基礎(chǔ)，這是唯一可以使用關(guān)鍵字!Important 的地方。

5. Theme rules. 設(shè)計你可能需要更換的樣式。

另外，還建議對屬于某個特定分組的類設(shè)定命名空間，并為JavaScript中使用的類使用單獨的命名空間。

這種方法使得編寫和維護代碼都更加容易，并且吸引了很多開發(fā)者。

Atomic CSS

使用Atomic CSS，為每一個可重用的屬性創(chuàng)建一個單獨的類。比如 margin-top: 1px;就可以創(chuàng)建一個類 mt-1，width: 200px;可以創(chuàng)建一個w-200。

這種風(fēng)格允許通過重復(fù)聲明來盡可能減少代碼，并且改變模塊樣式也相對容易，for example, when changing a technical task.

然而，這種方法也有很大的缺點：

• 類名都是描述性的屬性名，而不是對元素本身的語義化描述，有時會使得開發(fā)復(fù)雜化。

• 直接在HTML中顯示設(shè)置。

因為這些缺點，這種方法遭到了大量批評。但是，這種方法對于大型項目而言，還是很有效的。

此外Atomic CSS也被用在不同的框架里來指明矯正元素樣式，還有一些其它方法的展現(xiàn)層。

MCSS

MCSS是多層CSS。這種書寫代碼的風(fēng)格建議將樣式分為幾個部分，稱為層（layers）。

• 底層（Zero layer or foundation）。這層代碼負責(zé)重置瀏覽器樣式（比如reset.css 和
  normalize.css）;

• 基礎(chǔ)層（Base layer）包含網(wǎng)站重復(fù)使用的元素的樣式：按鈕、文本輸入框等。

• 項目層（Project layer）包含單獨的模塊和一個“上下文”——根據(jù)客戶端瀏覽器，查看站點/應(yīng)用程序的設(shè)備，用戶角色等對元素的修改。

• 修飾層（Cosmetic layer）代碼是OOCSS的風(fēng)格，對元素的外觀做一些小的修改。建議只保留影響元素外觀，但不會破壞網(wǎng)站布局的樣式（比如顏色和不重要的縮進）。

層級之間的交互層次是很重要的：

• 基礎(chǔ)層（base layer）定義中性樣式，不影響其他層。

• 基礎(chǔ)層（base layer）的元素只會影響本層的類。

• 項目層（project layer）的元素能影響基礎(chǔ)層和項目層。

• 修飾層（cosmetic layer）是以描述性O(shè)OCSS類（“atomic”類）的形式設(shè)計的，并且不會影響其他的CSS代碼，可選擇性的用于標記當(dāng)中。

AMCSS

AMCSS就是"Attribute Modules for CSS（css的屬性模塊）"。

讓我們看一個例子:

<div class="button button--large button--blue">Button</div>

這樣一個類的鏈并不簡單，所以讓我通過屬性來組織這些值。

結(jié)果如下:

<div button="large blue">Button</div>

為了避免命名沖突，添加命名空間到屬性上是個好主意。然后，我們的按鈕就變成了下面的樣子：

<div am-button="large blue">Button</div>

如果你使用驗證器檢查代碼，會發(fā)現(xiàn)并沒有am-button這個屬性，所以可以在屬性名稱前加上data-。

使用一個鮮為人知，作為class屬性的選擇器"~ =" (IE7+)：該選擇器選擇屬性值包含指定單詞的元素，用空格分隔。所以，這種class~="link"的選擇器類似于a.class.button這樣的選擇器。即使專門使用，因為class選擇器也只是該屬性選擇器的特殊情況。

因此，CSS代碼

.button {...}
.button--large {...}
.button--blue {...}

轉(zhuǎn)換為

[am-button] {...}
[am-button~="large"] {...}
[am-button~="blue"] {...}

如果你覺得這樣的代碼不常見，也可以使用不那么激進的AMCSS形式：

<div am-button am-button-large am-button-blue></div>

FUN

FUN表示選擇器的扁平結(jié)構(gòu)（Flat hierarchy of selectors），功能樣式（Utility styles），命名分割組件（Name-spaced components）。

每個字母后面都有特定的原則：

• F, flat hierarchy of selectors: 建議使用類來選擇元素，避免無用的串聯(lián)，并且不使用id。

• U, utility styles: 鼓勵創(chuàng)建atomic風(fēng)格的服務(wù)來解決典型的拼湊任務(wù)，比如 w100表示width:
  100%;，fr表示float: right;

• N, name-spaced components: Ben建議添加命名空間來指定特殊的模塊元素的樣式。這種方法避免了類名的重疊。

一些開發(fā)者注意到使用這種原則來書寫和維護代碼是相當(dāng)方便的；在某種程度上，作者拿出了最好的成果，并且以一種簡潔的方式展示了這項技術(shù)。

這種方法對項目和代碼結(jié)構(gòu)還有不小要求，它只建立記錄元素的首選形式和標記使用的方法。但是在小項目中，這些規(guī)則足夠創(chuàng)建出足夠高質(zhì)量的代碼。

關(guān)于“組織CSS的方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。