[譯]聊一聊CSS方法論

CoffeX 發(fā)布于2019-08-28 18:20 / 2705人閱讀

摘要：這個(gè)方法論在內(nèi)容和容器之間有著明顯的區(qū)分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。

原文鏈接：A Look at Some CSS methodologies

CSS在大型，復(fù)雜，快速迭代的系統(tǒng)中難以管理的程度是出了名的。

其中一個(gè)原因是CSS缺少內(nèi)置的作用域管理機(jī)制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改變完全沒有相關(guān)的那部分UI。

擴(kuò)展的CSS語言，也稱作CSS預(yù)處理器，比如說Sass，Less和Stylus，通過增加一些新的特性讓寫CSS代碼變得更簡單一點(diǎn)。但是就算有這些擴(kuò)展性的CSS語言，在我看來，也并沒有解決可擴(kuò)展性問題。

在CSS沒有自己的作用域機(jī)制之前，我們不得不設(shè)計(jì)出自己的一套系統(tǒng)來防止HTML文檔的特定區(qū)域不被收到影響。

下面是關(guān)于CSS方法論的介紹可能讓我們找到一些答案。

在這篇文章中，我們來看看這些CSS方法論：

面向?qū)ο蟮腃SS（Object-Oriented CSS(OOCSS)）

塊，元素，修飾符（Block,Element,Modifier(BEM)）

可擴(kuò)展性和模塊化性CSS架構(gòu)（Scalable and Modular Architecture for CSS(SMACSS)）

SUIT CSS

系統(tǒng)化CSS（Systematic CSS）

CSS方法論是正式的，文檔化寫CSS的方法系統(tǒng)，它能夠讓我們以一系列小的，獨(dú)立的方式來開發(fā)，維護(hù)和擴(kuò)展前端代碼。而不是作為一大塊整體的不可分割的代碼。

采用一種CSS方法論，甚至是你自己創(chuàng)建的一種，無論項(xiàng)目的大小和復(fù)雜度都會讓CSS變得更好設(shè)計(jì)并且更好地在設(shè)計(jì)項(xiàng)目中迭代。

相關(guān)：大型網(wǎng)站的CSS開發(fā)

每一種CSS方法論都提供了一系列略微不同的解決CSS可擴(kuò)展性/可維護(hù)性的方法。一個(gè)CSS方法論通常會定義一些指南：

CSS和HTML最佳實(shí)踐

Class和ID命名規(guī)范

CSS樣式規(guī)則的排序和組合

代碼格式

世界上并沒有“最佳”的CSS方法論。不同的方法適應(yīng)于不同的個(gè)人/項(xiàng)目組/項(xiàng)目。

我們希望的是，通過了解目前已經(jīng)存在的CSS方法論可以幫助我們找到一種適應(yīng)我們需求的方法。或者它也許能激發(fā)你的創(chuàng)造力，讓你創(chuàng)建一個(gè)你自己專屬的CSS方法論。

面向?qū)ο蟮腃SS（OOCSS）

Nicole Sullivan的面向?qū)ο蟮腃SS，或者簡單來說OOCSS，在2009年發(fā)布。

這實(shí)際上是第一個(gè)大范圍采用的CSS方法論。甚至到現(xiàn)在也有很大的影響力。

OOCSS鼓勵(lì)結(jié)構(gòu)和表面的分離。這個(gè)方法論在內(nèi)容和容器之間有著明顯的區(qū)分。

在OOCSS中，樣式規(guī)則只由CSS類選擇器來寫。

OOCSS例子

比如你的button元素的樣式可能有兩個(gè)CSS類來設(shè)置，比如下面這兩個(gè)

.button -- 提供button的基本結(jié)構(gòu)

.grey-btn -- 提供顏色和其他視覺樣式

CSS

.button{
    box-sizing:border-box;
    height:50px;
    width:100%;
}
.grey-btn{
    background:#EEE;
    border:1px solid #DDD;
    box-shadow:rgba(0,0,0,0.5) 1px 1px 3px;
    color:#555;
}

HTML

反例

/* 后代選擇器在OOCSS中是 */
.wrapper .blog-post .button{
    ...
}

通過這種方式，HTML元素的樣式表現(xiàn)就不會依賴于其所在的特定DOM結(jié)構(gòu)上，也就不會受到位置的影響。

OOCSS方法論這樣做的最大好處就是它能夠讓作者最大的利用CSS層疊的樣式的好處，而不是把它鎖在高度具體的選擇器中。

相關(guān)：CSS特性是怎么工作的？

作者鼓勵(lì)我們無論何時(shí)都去復(fù)用已有的樣式而不是創(chuàng)建新的樣式。我們也被鼓勵(lì)通過新的類來擴(kuò)展樣式而不是修改或者覆蓋已有的CSS樣式。

反例

HTML



    Combine my CSS files
    Run CSS Lint
    Minify my stylesheet

CSS

 /*  反例 */
 .to-do{
     color:#FFF;
     background-color:#000;
 }
 .to-do li:first-child{
     color:#FF0000;
 }

OOCSS例子

為了讓我們的CSS更具模塊化和靈活度，并且防止出現(xiàn)后代選擇器，我們用下面的方式來復(fù)寫上面的反例：

HTML



      Combine my CSS files
      Run CSS Lint
      Minify my stylesheet

CSS

/* OOCSS */
.to-do {
      color: #FFF;
      background-color: #000;
}
.first-to-do-item {
      color: #FF0000;
}

OOCSS的弱點(diǎn)是你很可能會使用很多很多的類，到最后你都無法維護(hù)或管理啦。

并且，在我看來，讓OOCSS產(chǎn)生靈感的面向?qū)ο缶幊痰乃枷朐贑SS中并不契合。

但是，這并不是說OOCSS的原則是無效的。相反，OOCSS是把大型CSS開發(fā)帶來理性的常用的CSS方法論.

塊，元素，修飾符

塊，元素，修飾符－－更常被叫做BEM--是一個(gè)由被稱為俄羅斯的谷歌的Yandex開發(fā)組開發(fā)的一套CSS體系。

在BEM背后的思想是區(qū)分實(shí)現(xiàn)不同角色的CSS類。這是通過把CSS命名為表示其角色的類名。

BEM剛好可以作為OOCSS的補(bǔ)充，因?yàn)镺OCSS并沒有施加任何的命名規(guī)范。

在BEM的方法論中，一個(gè)塊是一個(gè)獨(dú)立的模塊好的UI組件。一個(gè)塊可以由多個(gè)HTML元素組成，甚至有幾個(gè)塊組合而成。比如說導(dǎo)航菜單和搜索表單就是一個(gè)塊的例子。

一個(gè)元素就是塊的一個(gè)組件。一個(gè)元素一般用來完成一個(gè)目的。比如說，你有一個(gè)導(dǎo)航菜單塊，那導(dǎo)航菜單的鏈接就是元素，它可以使一個(gè)列表項(xiàng)(li元素)或者鏈接(a元素).

一個(gè)修飾符是用來改變塊或者元素默認(rèn)樣式的CSS類。

喜愛案就是BEM類命名的語法：

.block

.block--modifier

.block__element

.block__element--modifier

反例

考慮下面的例子，標(biāo)記代表的是一個(gè)登錄表單：

HTML


    
    username 
    
    
        password

BEM范例

下面是使用BEM命名規(guī)則來為上面的標(biāo)記命名：

HTML


    
Username 
    
    
Password

這個(gè).loginform類是一個(gè)塊。
這個(gè).loginform塊由三個(gè)元素組成：

元素	作用
loginform__username	代表用戶名
loginform__password	代表密碼
loginform__btn	用戶點(diǎn)擊提交表單

這三個(gè)修飾符分別是：

修飾符	描述
.loginform__username--errror	錯(cuò)誤時(shí)的樣式
.loginform__btn--inactive	未激活樣式
.loginform--errors	包含錯(cuò)誤的樣式

這種BEM的命名規(guī)則幫助CSS的作者遵循OOCSS的原則。通過使用這種扁平的命名方式避免了多后代的選擇器。

反例

所以我們不會用下面這種樣式命名規(guī)則。。。

CSS

.loginform .username .error{
    ...
}

BEM范例

。。。你只需要一個(gè)類選擇器：

CSS

.loginform__username--error{
    ...
}

BEM是一個(gè)非常魯棒的命名規(guī)范。

它成功地區(qū)分了類的不同關(guān)注點(diǎn)。并且通過類名我們可以很簡單的看到標(biāo)記之間的關(guān)系。

一些關(guān)于BEM的主觀批評如下：

類名會變的很長很難看

命名規(guī)范對于沒有經(jīng)驗(yàn)的開發(fā)者來說不是那么的好理解

作為個(gè)人來講，我倒不認(rèn)為這是特別強(qiáng)烈的批評。但是如果有一個(gè)能夠和BEM一樣魯棒的命名規(guī)范同時(shí)能夠更簡潔和好理解那就更好啦。

待續(xù)。。。

GPU云服務(wù)器云服務(wù)器聊一聊來聊一聊聊一聊去抖聊一聊java內(nèi)存

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111182.html

發(fā)表評論

登陸后可評論

0條評論

CoffeX

男|高級講師

我要關(guān)注我要私信

TA的文章

新智能硬件創(chuàng)新沙龍&大賽

閱讀 1897·2021-11-17 09:33
華納云(hncloud)，美國云服務(wù)器測評，CN2+OpenStack云平臺，默認(rèn)送10G DDOS

閱讀 6494·2021-10-12 10:20
怎么連接云主機(jī)-云主機(jī)怎么使用？

閱讀 2312·2021-09-22 15:50
主機(jī)帶寬怎么選-選購新睿云云主機(jī)帶寬怎么選？

閱讀 1799·2021-09-22 15:10
英偉達(dá)：已完成對高清地圖創(chuàng)企 DeepMap 的收購

閱讀 632·2021-09-10 10:51
基于STM32f103c8t6和L292N驅(qū)動(dòng)設(shè)計(jì)避障小車（核心函數(shù)的建立為自己所寫）

閱讀 638·2021-09-10 10:50
DMIT，LAX.Pro系列VPS進(jìn)行免費(fèi)的流量升級，加量不加價(jià)，SHAREv2由1.0T升級為1.

閱讀 3067·2021-08-11 11:19
小程序瀑布流效果，解決左右兩邊高度差距過大的問題

閱讀 1789·2019-08-30 15:55

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

[譯]聊一聊CSS方法論

相關(guān)文章