日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
 

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
    看看我的博客
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    愛折騰的前端工程師，歡迎關(guān)注我的公眾號(hào)「更了不起的前端」
  
  
  
  
  

  
  
  
  

 
 
 
 

  
  
  
  
.sfq-Modal{} /* 我的彈窗組件 */
  
  
  
  
.sfq-Button {} /* 我的按鈕組件 */
 
 
 
 

 
 
 
 

  
  
  
  
.Modal {}
 
 
 
 

 
 
 
 

  
  
  
  

  
  
  
  
  …
  
  
  
  

 
 
 
 

  
  
  
  

  
  
  
  
  
  
  
  
  
    歡迎關(guān)注
  
  
  
  
    X
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    愛折騰的前端工程師，歡迎關(guān)注我的公眾號(hào)「更了不起的前端」
  
  
  
  
  

組件名--修飾符

修飾符是一種表示組件特定狀態(tài)的類名，修飾符名稱同樣使用小駝峰規(guī)則來命名，并且和組件名直接需要用兩個(gè)短橫線(--)進(jìn)行連接，這與 BEM 表現(xiàn)一致。

 
 
 
 

  
  
  
  
點(diǎn)擊關(guān)注「更了不起的前端」
  
  
  
  
點(diǎn)擊關(guān)注「更了不起的前端」
 
 
 
 

變量名

SUIT CSS 除了定義了工具類、組件類這兩種命名方式外，還有定義了 CSS 變量的命名方式。命名規(guī)則： --組件名[-后代名|--修飾符]-(CSS屬性|變量名)。

 
 
 
 

  
  
  
  
:root {
  
  
  
  
  /* 基礎(chǔ)按鈕的背景色 */
  
  
  
  
  --Button--default-backgroundColor: #909399;
  
  
  
  
  /* 主要按鈕的背景色 */
  
  
  
  
  --Button--primary-backgroundColor: #409EFF;
  
  
  
  
}
 
 
 
 

SUIT CSS 小結(jié)

SUIT CSS 除了定義了工具類、組件類的命名方式外，還提供了完整的基礎(chǔ)類，以及測(cè)試套件用來檢測(cè)你的 CSS 類名是否符合規(guī)范，具體使用方法可以查看官方文檔(https://github.com/suitcss/suit)。SUIT CSS 可以說在 BEM 的基礎(chǔ)上進(jìn)行了改進(jìn)，特別是去除了雙下劃線的設(shè)計(jì)，在觀感上就比 BEM 美觀了許多，而且各種名稱都是通過駝峰的方式命名，省略了部分短橫線，這讓 SUIT CSS 的類名的長(zhǎng)度上也會(huì)比 BEM 更加精簡(jiǎn)。

SMACSS

“SMACSS 官網(wǎng)：http://smacss.com/

SMACSS (Scalable and Modular Architecture for CSS)是一套易開發(fā)，易維護(hù)的 CSS 編寫的方法論，它將 CSS 規(guī)則一共分為五大類：

• Base(基礎(chǔ))
• Layout(布局)
• Module(模塊)
• State(狀態(tài))
• Theme(主題)

你應(yīng)該能在你現(xiàn)有項(xiàng)目的樣式里發(fā)現(xiàn)上面的五個(gè)分類，這幾種類型的樣式混合在一起會(huì)讓你的代碼顯得特別復(fù)雜，如果你有意識(shí)將這些樣式歸類，將大大降低復(fù)雜度。除了將樣式歸類之外，每個(gè)類別還有一些適用的準(zhǔn)則。

基礎(chǔ)規(guī)則

基礎(chǔ)規(guī)則作用于元素選擇器，用于定義 HTML 標(biāo)簽的默認(rèn)樣式?；A(chǔ)樣式主要用于設(shè)置標(biāo)題大小，默認(rèn)鏈接顏色，默認(rèn)字體樣式以及body背景等。

 
 
 
 

  
  
  
  
/* 基礎(chǔ)樣式示例 */
  
  
  
  
body, form {
  
  
  
  
    margin: 0;
  
  
  
  
    padding: 0;
  
  
  
  
}
  
  
  
  

  
  
  
  
a {
  
  
  
  
    color: #039;
  
  
  
  
}
  
  
  
  

  
  
  
  
a:hover {
  
  
  
  
    color: #03F;    
  
  
  
  
}
 
 
 
 

布局規(guī)則

CSS 的本質(zhì)上來說就是布局頁(yè)面中的元素的，但是，頁(yè)面各個(gè)元素也是有主次之分的。例如，頭部、尾部這種大的區(qū)塊就是主要組件，我們稱之為布局(Layout)。而導(dǎo)航欄(屬于頭部)，網(wǎng)站說明(屬于尾部)這種區(qū)塊為次要組件，我們稱之為模塊(Module)。

下面舉個(gè)具體的案例，來看看掘金的頁(yè)面布局：

juejin.cn

頁(yè)面上有一個(gè)頭部，一個(gè)導(dǎo)航條，一個(gè)內(nèi)容區(qū)域以及一個(gè)側(cè)邊欄，這些都屬于布局的部分。

juejin.cn

SMACSS 中允許在布局樣式中，使用 ID 選擇器，有助于在 HTML 中一眼區(qū)分出節(jié)點(diǎn)在布局中的位置。其他的非 ID 選擇器的類，需要添加 l- 前綴，表示這屬于布局樣式。