成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

六種組織CSS的方式

warmcheng / 1957人閱讀

摘要：意為面向?qū)ο蟮?。這種書寫代碼的風(fēng)格建議將樣式分為幾個(gè)部分，稱為層。這種方法避免了類名的重疊。一些開發(fā)者注意到使用這種原則來(lái)書寫和維護(hù)代碼是相當(dāng)方便的在某種程度上，作者拿出了最好的成果，并且以一種簡(jiǎn)潔的方式展示了這項(xiàng)技術(shù)。

Ben Frain曾經(jīng)說(shuō)過(guò)，寫css代碼很容易，但是擴(kuò)展和維護(hù)卻很難。本文就介紹了一套方案來(lái)解決這個(gè)問題。

OOCSS

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

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

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

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

在這一步，會(huì)存在兩點(diǎn)（通常就好和壞）：

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

壞: 組合使用。當(dāng)你改變一個(gè)特定元素的樣式, 你需要改變的很有可能不僅僅是CSS（因?yàn)榇蠖嗍穷惗际枪驳模?，而且還會(huì)添加新的類。

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

實(shí)際結(jié)果就是，這種OOCSS的思想啟發(fā)了其他人創(chuàng)建出屬于他們自己更具體的代碼結(jié)構(gòu)。

SMACSS

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

Jonathan Snook將樣式分為了5個(gè)部分:

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

Layout rules. 這些是全局元素的樣式，比如

的尺寸等。Jonathan建議在這些元素中使用id選擇器，因?yàn)檫@些元素在頁(yè)面中不會(huì)出現(xiàn)超過(guò)一次。然而，這篇文章的作者認(rèn)為這并不是好的做法。(在樣式文件中，不管id什么時(shí)候出現(xiàn)，都會(huì)在其它的某個(gè)地方造成些麻煩).

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

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

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

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

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

Atomic CSS

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

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

然而，這種方法也有很大的缺點(diǎn)：

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

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

因?yàn)檫@些缺點(diǎn)，這種方法遭到了大量批評(píng)。但是，這種方法對(duì)于大型項(xiàng)目而言，還是很有效的。

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

MCSS

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

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

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

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

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

層級(jí)之間的交互層次是很重要的：

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

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

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

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

AMCSS

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

讓我們看一個(gè)例子:

Button

這樣一個(gè)類的鏈并不簡(jiǎn)單，所以讓我通過(guò)屬性來(lái)組織這些值。

結(jié)果如下:

Button

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

Button

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

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

因此，CSS代碼

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

轉(zhuǎn)換為

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

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

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

每個(gè)字母后面都有特定的原則：

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

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

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

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

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

總結(jié)

正如你所見，這些方法里并沒有一個(gè)完美的。這些方法中沒有一條絕對(duì)的規(guī)則——你可以從開始使用一套方案來(lái)創(chuàng)建你自己的東西， 或者從頭開始創(chuàng)建一條新的方法。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114750.html

相關(guān)文章

  • 六種組織CSS的方式

    摘要：意為面向?qū)ο蟮?。這種書寫代碼的風(fēng)格建議將樣式分為幾個(gè)部分，稱為層。這種方法避免了類名的重疊。一些開發(fā)者注意到使用這種原則來(lái)書寫和維護(hù)代碼是相當(dāng)方便的在某種程度上，作者拿出了最好的成果，并且以一種簡(jiǎn)潔的方式展示了這項(xiàng)技術(shù)。 Ben Frain曾經(jīng)說(shuō)過(guò)，寫css代碼很容易，但是擴(kuò)展和維護(hù)卻很難。本文就介紹了一套方案來(lái)解決這個(gè)問題。 OOCSS showImg(https://segment...

    leeon 評(píng)論0 收藏0

  • 六種組織CSS的方式

    摘要：意為面向?qū)ο蟮?。這種書寫代碼的風(fēng)格建議將樣式分為幾個(gè)部分，稱為層。這種方法避免了類名的重疊。一些開發(fā)者注意到使用這種原則來(lái)書寫和維護(hù)代碼是相當(dāng)方便的在某種程度上，作者拿出了最好的成果，并且以一種簡(jiǎn)潔的方式展示了這項(xiàng)技術(shù)。 Ben Frain曾經(jīng)說(shuō)過(guò)，寫css代碼很容易，但是擴(kuò)展和維護(hù)卻很難。本文就介紹了一套方案來(lái)解決這個(gè)問題。 OOCSS showImg(https://segment...

    raledong 評(píng)論0 收藏0

  • Zepto 源碼分析 4 - 核心模塊入口

    摘要：對(duì)象構(gòu)造函數(shù)讀入的兩個(gè)參數(shù)與在中也有明確的規(guī)范，用以保證構(gòu)造函數(shù)的簡(jiǎn)單性。 承接第三篇末尾內(nèi)容，本篇結(jié)合官方 API 進(jìn)入對(duì) Zepto 核心的分析，開始難度會(huì)比較大，需要重點(diǎn)理解幾個(gè)核心對(duì)象的關(guān)系，方能找到線索。 $() 與 Z 對(duì)象創(chuàng)建 Zepto Core API 的首個(gè)方法 $() 按照其官方解釋： Create a Zepto collection object by pe...

    xzavier 評(píng)論0 收藏0

  • 搞定css三欄布局（六種方法）

    摘要：塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于父級(jí)元素中。元素框相對(duì)于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。元素框不再占有文檔流位置，并且相對(duì)于視窗進(jìn)行定位。 談到布局，首先就要想到定位，當(dāng)別人問我，css的position定位有哪些取值，分別表示什么意思？呃.....抓頭.gif，是時(shí)候回歸本質(zhì)，看定義了。 1. 定位 1.1 po...

    evin2016 評(píng)論0 收藏0

  • ELSE 技術(shù)周刊(2017.12.18期)

    摘要：程序人生從黑客到創(chuàng)業(yè)，他說(shuō)技術(shù)創(chuàng)業(yè)該這么做知道創(chuàng)宇，安全焦點(diǎn)民間白帽黑客組織核心成員，分享他創(chuàng)業(yè)感悟和踩過(guò)的那些坑。技術(shù)周刊由小組出品，匯聚一周好文章，周刊原文。 業(yè)界動(dòng)態(tài) 他們寫的代碼能上天！NASA的10條安全編碼準(zhǔn)則大公開 NASA的10條代碼編寫規(guī)范準(zhǔn)則 本期推薦 Node.js 中遇到含空格 URL 的神奇Bug——小范圍深入 HTTP 協(xié)議 本文闡述了博主遇到含空格 URL...

    douzifly 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<