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

資訊專欄INFORMATION COLUMN

[譯]聊一聊CSS方法論

cfanr / 2392人閱讀

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

原文鏈接：A Look at Some CSS methodologies

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

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

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

在CSS沒有自己的作用域機(jī)制之前，我們不得不設(shè)計出自己的一套系統(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)，它能夠讓我們以一系列小的，獨立的方式來開發(fā)，維護(hù)和擴(kuò)展前端代碼。而不是作為一大塊整體的不可分割的代碼。

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

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

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

CSS和HTML最佳實踐

Class和ID命名規(guī)范

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

代碼格式

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

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

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

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

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

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

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

OOCSS例子

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

.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特性是怎么工作的？

作者鼓勵我們無論何時都去復(fù)用已有的樣式而不是創(chuàng)建新的樣式。我們也被鼓勵通過新的類來擴(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的弱點是你很可能會使用很多很多的類，到最后你都無法維護(hù)或管理啦。

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

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

塊，元素，修飾符

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

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

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

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

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

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

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

.block

.block--modifier

.block__element

.block__element--modifier

反例

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

HTML
BEM范例

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

HTML

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

元素 作用
loginform__username 代表用戶名
loginform__password 代表密碼
loginform__btn 用戶點擊提交表單

這三個修飾符分別是：

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

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

反例

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

CSS

.loginform .username .error{
    ...
}
BEM范例

。。。你只需要一個類選擇器：

CSS

.loginform__username--error{
    ...
}

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

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

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

類名會變的很長很難看

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

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

待續(xù)。。。

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

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

相關(guān)文章

  • [譯]聊一聊CSS方法論

    摘要：這個方法論在內(nèi)容和容器之間有著明顯的區(qū)分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。 原文鏈接：A Look at Some CSS methodologies CSS在大型，復(fù)雜，快速迭代的系統(tǒng)中難以管理的程度是出了名的。 其中一個原因是CSS缺少內(nèi)置的作用域管理機(jī)制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...

    CoffeX 評論0 收藏0

  • [聊一聊系列]聊一聊百度移動端首頁前端速度那些事兒

    摘要：要快，但是我們的服務(wù)也必須萬無一失，后續(xù)我會分享百度移動端首頁的前端架構(gòu)設(shè)計那么這樣的優(yōu)化，是如何做到的呢，又如何兼顧穩(wěn)定性，架構(gòu)性，與速度呢別急，讓我們把這些優(yōu)化一一道來。百度移動端首頁的很多就是這樣緩存在客戶端的。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fronte...

    The question 評論0 收藏0

  • 2017-08-10 前端日報

    摘要：前端日報精選譯用搭建探索生命周期中的匿名遞歸瀏覽器端機(jī)器智能框架深入理解筆記和屬性中文上海線下活動前端工程化架構(gòu)實踐滬江技術(shù)沙龍掘金周二放送追加視頻知乎專欄第期聊一聊前端自動化測試上雙關(guān)語來自前端的小段子，你看得懂嗎眾成翻 2017-08-10 前端日報 精選 [譯] 用 Node.js 搭建 API Gateway探索 Service Worker 「生命周期」JavaScript ...

    wupengyu 評論0 收藏0

  • [聊一聊系列]聊一聊iconfont那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規(guī)則說起。因為用戶沒有安裝的話，我們強(qiáng)制要求顯示也沒有辦法。國內(nèi)有阿里巴巴的平臺，可以選自己喜歡的圖標(biāo)導(dǎo)出。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

    Markxu 評論0 收藏0

  • [聊一聊系列]聊一聊iconfont那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規(guī)則說起。因為用戶沒有安裝的話，我們強(qiáng)制要求顯示也沒有辦法。國內(nèi)有阿里巴巴的平臺，可以選自己喜歡的圖標(biāo)導(dǎo)出。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

    2501207950 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<