CSS命名實踐

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/07/15/7173867.html
-Advertisement-
Play Games

前面的話 每次寫HTML結構涉及到CSS命名時，都要掙扎一番。關於CSS命名的規範，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在這裡面最火的應該算BEM了。本文將詳細介紹CSS命名 主流命名 【BEM】 說起CSS命名，當然要提到BEM。BEM的意思就是B模塊(block)、E ...


前面的話

　　每次寫HTML結構涉及到CSS命名時，都要掙扎一番。關於CSS命名的規範，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在這裡面最火的應該算BEM了。本文將詳細介紹CSS命名

 

主流命名

【BEM】

　　說起CSS命名，當然要提到BEM。BEM的意思就是B模塊(block)、E元素(element)、M修飾符(modifier)。模塊和子元素之間用兩個下劃線分隔，子元素和修飾符之間用兩個中劃線分隔

  關於子元素E，有兩種寫法。一種是按照層級嵌套來寫，如block-ele1-son-inner，但是這樣寫會導致命名過長；另一種是扁平化，一個模塊B下的所有子元素，無論相互層級如何，都直接連接B，如block-inner，但是這樣就無法表示層級關係，命名時也可能會出現衝突

  BEM的命名是很好的，不然也不能成為最流行的命名方法。但是，BEM對子元素的命名，無論是層級長命名還是扁平化短命名，都有缺陷

【NEC】

　　相較於BEM以模塊B為頂級元素，子元素類名中包含繼承關係的命名，網易的NEC規範使用後代選擇器方式

  NEC將元素分為了5類：佈局(grid)(.g-)；模塊(module)(.m-)；元件(unit)(.u-)；功能(function)(.f-)；皮膚(skin)(.s-)；狀態(.z-)。而後代選擇器不需要完整表現結構樹層級，儘量能短則短

.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}

　　個人認為，網易對於元素分類的做法很好。關於一些全局可復用的功能性的模塊進行區分，結構更為清晰。但是，對於使用後代選擇器的方式，個人不太認同。當嵌套層級較深時，命名衝突依舊是一個問題

【JD】

　　京東的命名規則採用表示層級嵌套關係的長命名。當子孫模塊超過4級或以上的時候，考慮在祖先模塊內具有識辨性的獨立縮寫作為新的子孫模塊

<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
        <div class="modulename_info_user">
            <div class="modulename_info_user_img">
                <img src="" alt="">
                <!-- 這個時候 miui 為 modulename_info_user_img 首字母縮寫-->
                <div class="miui_tit"></div>
                <div class="miui_txt"></div>
                ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

　　京東這種因數元素名字過長而採用首字母縮寫的做法非常贊，至今市面上沒有其他更好的解決長命名的方案

 

命名方式

【後代選擇器還是類名】

　　關於CSS命名，最大的爭論就是使用後代選擇器還是使用類名。以下例所示

<ul class="list">
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
</ul>

<ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

<ul class="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

　　如果採用第一種長類名的方式，為<li>元素設置樣式，只需如下設置即可

.list-item{}

　　如果採用第二種短類名的方式，則為<li>元素設置樣式，需如下設置

.list .item{}

　　如果採用第三種後代選擇器的方式，則為<li>元素設置樣式，需如下設置

.list li{}

　　如果從簡易角度來看，第三種後代選擇器的方式最簡單，無需花時間去給子元素起名，且在sass中書寫很容易

.list{
    li{}
}

　　但是，它有一個很嚴重的問題，就是如果HTML結構層級較深，往往出現選擇器層級過長，如.list li span a{}

　　而且，因為後代選擇器強烈地依賴HTML結構，為了避免因為少寫一層結構，導致選擇器特殊性降低，樣式無法生效的情況，也不得不這樣寫

　　一個不得不提的問題是，CSS選擇器的解析順序是從右到左。而使用後代選擇器.list li{}，瀏覽器需要遍歷出所有的li，再找出.list下的li，效率是最低的

　　因此，個人認為第三種後代選擇器的方式並不是好選擇

　　下麵介紹第二種短類名的方式

　　1、選擇器解析效率比第三種方式好，畢竟.item比li的範圍小很多

　　2、短類名.list .item同樣存在依賴HTML結構的情況，很可能出現選擇器層級過長

　　3、使用較簡易，在sass中書寫容易，且起名也較簡單

　　4、由於給li增加了類名，於是增加了HTML文件大小

　　最後介紹第三種長類名的方式

　　這種方式的選擇器效率最高，因為.list-item這個類型頁面中只出現一次，可類比於id選擇器的解析速度

　　由於使用長類名的方式，可以完全不使用後代選擇器，則無需考慮選擇器特殊性較低，樣式無法生效的情況，也不會出現選擇器層級過長，因為它僅有一級

　　但是，相應地，它最大的缺點是類名較長，大大地增加了HTML文件大小。於是，可借鑒京東，當子孫模塊超過3級時，採用首字母縮寫，並將縮寫後首字母大寫的做法，在如將.list-item-link-title縮寫為.Lil-title

　　最終，選擇可縮寫的長類名作為CSS命名的主要方式

【分隔符】

　　一般地，classname分隔符有3種，中劃線-，下劃線_，以及首字母大寫，以分隔list和item為例

//中劃線
list-item
//下劃線
list_item
//首字母大寫
listItem

　　1、中劃線

　　中劃線可以用來表示層級關係

<div class="box">
    <ul class="box-list">
        <li class="box-list-item"></li>
        <li class="box-list-item"></li>
        <li class="box-list-item"></li>
    </ul>
</div>

　　2、下劃線

　　下劃線可以用來表示不同的狀態

<div class="box">
    <button class="box-btn box-btn_default" type="button"></button>
    <button class="box-btn" type="button"></button>
</div>

　　3、首字母大寫

　　首字母大寫可以用來表示因為樣式的需要，而不得不增加的HTML結構。一般地，如果在外層增加結構，可以增加Wrap，在內層增加結構，可以增加Inner，且不影響原先的classname的命名

<div class="boxWrap">
    <section class="box">
        <h2 class="box-title"></h2>
        <p class="box-content"></p>
    </section>    
</div>

【組件】

　　通過上面的長命名方式和分隔符的使用，解決了基礎結構的命名。但是，在頁面中，很可能出現一些組件的應用，這些組件可以復用到頁面的多個位置。這時，再使用上面的方式就不太合適

　　於是，可以以m-為首碼，來表示這是一個組件

<div class="box">
    <button class="m-btn m-btn_error" type="button"></button>
    <button class="m-btn" type="button"></button>
</div>

 

命名推薦

　　有了合適的命名方式，還需要語義化命名，且有不影響語義的情況下，可以簡寫

【佈局】

文檔    doc
頭部    header(hd)
主體    body    
尾部    footer(ft)    
主欄    main
側欄    side    
容器    box/container

【通用部件】

列表    list
列表項  item
表格    table    
表單    form
鏈接    link
標題    caption/heading/title
菜單    menu
集合    group
條      bar
內容    content    
結果    result

【組件】

按鈕        button(btn)
字體        icon
下拉菜單     dropdown
工具欄       toolbar
分頁         page
縮略圖       thumbnail
警告框       alert
進度條       progress
導航條       navbar
導航         nav    
子導航       subnav
麵包屑       breadcrumb(crumb)    
標簽        label
徽章        badge
巨幕        jumbotron
面板        panel
窪地        well
標簽頁      tab
提示框      tooltip
彈出框      popover
輪播圖      carousel
手風琴      collapse 
定位浮標    affix

【語義化小部件】

品牌        brand
標誌        logo
額外部件    addon
版權        copyright
註冊        regist(reg)
登錄        login
搜索        search    
熱點        hot
幫助        help
信息        info
提示        tips
開關        toggle
新聞        news
廣告        advertise(ad)
排行        top    
下載        download

【功能部件】

左浮動    fl
右浮動    fr
清浮動    clear

【狀態】

前一個    previous
後一個    next
當前的    current

顯示的    show
隱藏的    hide
打開的    open
關閉的    close

選中的    selected
有效的    active
預設的    default
反轉的    toggle

禁用的    disabled
危險的    danger
主要的    primary
成功的    success
提醒的    info
警告的    warning
出錯的    error

大型的    lg
小型的    sm
超小的    xs

 

實踐

<header class="hd">
    <nav class="hd-navbar m-navbar m-varbar_primary">
        <div class="hd-navbar-tel">聯繫方式：400-888-8888</div>
        <ul class="hd-navbar-nav">
            <li class="Hnn-itm m-btn m-btn_info"><a href="#">登錄</a></li>
            <li class="Hnn-itm m-btn"><a href="#">快速註冊</a></li>
            <li class="Hnn-itm m-btn"><a href="#">關於</a></li>
            <li class="Hnn-itm m-btn"><a href="#">幫助</a></li>
        </ul>
    </nav>
    ...
</header>

　　關於CSS命名，並沒有最佳實踐之說，根據項目的複雜程式進行合適的命名才是可取的　　

　　歡迎交流　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於Lumen / Laravel .env 文件中的環境變數是如何生效的
    .env 文件包含預設環境變數，我們還可自定義其他任何有效的變數，並可通過 調用 env() 或 $_SERVER 或 $_ENV 來獲取該變數。那麼env()是如何載入到這些變數的呢？在Lumen的vendor/laravel/lumen-framework/src/helpers.php中，我們 ...
  • python基礎（2）：python的變數和常量
    今天看看python的變數和常量： 首先先說一下解釋器執行Python的過程： python3 C:\test.py 1. 啟動python解釋器（記憶體中） 2. 將C:\test.py內容從硬碟讀入記憶體（這一步與文本編輯器是一樣的） 3. 執行讀入記憶體的代碼 如果想要永久保存代碼，就要用文件的方式 ...
  • python基礎（1）：初識python
    今天開始進行python的系統學習開始寫隨筆希望對看到的人有所幫助。 預習： 1、安裝python2和python3，實現多版本共存 2、用python語言編寫代碼，要求輸入用戶信息：姓名，年紀，家庭住址，然後列印 3、老男孩的年紀為63，要求製作一個猜年齡的游戲用戶輸入的年齡小了則提示：too s ...
  • 會話機制cookie/session
    會話控制 概念: 在同一個網站上,多個頁面切換時,保持用戶登錄狀態,訪問的都登錄用戶是自己的信息; 在網站中跟蹤一個用戶,處理在同一個網站中同一個用戶在多個頁面為其共用數據! 允許伺服器跟蹤同一個客戶端做出的連續請求! 緣由: 訪問web頁面要使用’ HTTP 協議’ 實現, 而HTTP 協議是無狀 ...
  • java8 增強的Iterator遍歷集合元素
    Iterator介面也是Java集合框架的成員，與Collection和Map兩個系列的集合不一樣的是Collection和Map系列主要用於充當容器的作用，而Iterator正如其名字一樣是主要用於迭代訪問Collection集合中的元素，Iterator對象也被稱為迭代器。 Iterator介面 ...
  • c#設計模式·結構型模式
    看的過程中，發現好多模式都用過，只是沒有總結，或者是不知道叫這個名字吧··· 這裡列舉結構型模式，適配器、橋接、過濾、組合、裝飾器、外觀、享元、代理， 適配器模式：將現存的對象放到新的環境裡邊去，但是介面不一樣，其實就是添加一個類把新的介面包裝一樣 之前公司的wcf服務端就是這種模式，公司很多部門， ...
  • autofac初識
    在開始autofac時，有必要先瞭解兩個關鍵詞：“控制反轉(IoC/Inverse Of Control)”與“依賴註入(DI/Dependence injection)”。 控制反轉(IoC):它把傳統上由程式代碼直接操控的對象的調用權交給容器，通過容器來實現對象組件的裝配和管理。 依賴註入(DI ...
  • C# 設計模式·創建型模式
    面試問到這個··答不出來就是沒有架構能力···這裡學習一下···面試的時候直接讓我說出26種設計模式··當時就懵逼了··我記得好像之前看的時候是23種的 還有3個是啥的··· 這裡先列出幾種創建型模式，工廠、抽象工廠、單例，建造者、原型，後續在更新 工廠模式：缺點是每增加一個類型就得增加一個工具類和 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類