欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS使用BEM命名規(guī)范實踐

  發(fā)布時間：2020-09-28 11:49:19   作者：每天健康前端團隊   我要評論
這篇文章主要介紹了CSS使用BEM命名規(guī)范實踐,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

當(dāng)你看到一個class的時候，你想得到什么信息？

  • 這個class用在什么地方，作用是什么？
  • 是否在其他地方也有使用該class，修改會不會引起其他地方的樣式問題？
  • class 是否在js中被使用？
  • ......

此時，你最想一眼看到這個class就解決以上所有的問題，而BEM你值得擁有

什么是BEM

BEM（塊，元素，修飾符）是基于組件的Web開發(fā)的一種前端命名方法論，主要針對CSS。其背后的想法是將用戶界面分為獨立的塊。即使使用復(fù)雜的UI，這也使界面開發(fā)變得容易和快速，并且允許重用現(xiàn)有代碼而無需復(fù)制和粘貼。

優(yōu)勢

  • 避免樣式?jīng)_突
  • 減小名稱長度
  • 提高可閱讀性
  • 增加樣式重用

怎么使用BEM

Block

一個功能獨立的頁面組件，可以重復(fù)使用

塊不應(yīng)影響其環(huán)境，這意味著您不應(yīng)設(shè)置塊的外部幾何形狀（邊距）或位置

<!--
    good
-->
< div  class = "header" > </ div >

<!--
    bad
    red-text 是描述外觀
-->
< div  class = "red-text" > </ div >

Element

塊的復(fù)合部分，不能單獨使用

元素全名的結(jié)構(gòu)為block-name__element-name

<!-- 塊 `search-form` -->
<form class="search-form">
    <!-- `input button` 元素 在 `search-form` 塊中 -->
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

一個元素始終是塊的一部分，而不是另一個元素，因此元素名稱不可定義為 block__elem1__elem2 的層次結(jié)構(gòu)

<!--
    good
    遵循 `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input">
        <button class="search-form__button">Search</button>
    </div>
</form>

<!--
    bad
    ' search-form__content__button ' 不遵循 `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__content__input">
        <button class="search-form__content__button">Search</button>
    </div>
</form>

元素始終是一個塊的一部分，您不應(yīng)該與該塊分開使用

<form class="search-form">
    <!-- 
        good
        元素在塊 search-form 的里面
     -->
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

<form class="search-form"></form>
<!--
    bad 
    元素不在塊 search-form 的里面
-->
<input class="search-form__input">
<button class="search-form__button">Search</button>

Modifier

定義塊或元素的外觀，狀態(tài)或行為的實體

修飾符的兩種類型

Boolean

修飾符全名的結(jié)構(gòu)遵循以下模式：

  • block-name_modifier-name
  • block-name--modifier-name
  • block-name_element-name_modifier-name
  • block-name_element-name--modifier-name
<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- 'disabled' 是 'button' 的元素 -->
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

Key-value

修飾符全名的結(jié)構(gòu)遵循以下模式：

  • block-name_modifier-name_modifier-value
  • block-name_modifier-name--modifier-value
  • block-name__element-name_modifier-name_modifier-value
  • block-name__element-name_modifier-name--modifier-value
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <!-- 
        good
        `button` 的修飾符 `size` 的值是 `m` 
    -->
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

<form class="search-form
             search-form_theme_islands
             search-form_theme_lite">
    <input class="search-form__input">

    <!-- 
        bad
        不可同時使用兩個不同值的相同修飾符 
    -->
    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
   </button>
</form>

不能將修飾符與修飾的塊或元素隔離使用。修飾符應(yīng)更改實體的外觀，行為或狀態(tài)，而不是替換它

<!--
    good
-->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

<!-- 
    bad
    缺少了塊名稱 'search-form' 
-->
<form class="search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

在修飾符和元素名稱中添加塊名稱的好處

  • 有助于減少一個塊的元素和修飾符對另一個塊的實現(xiàn)的影響
  • 可更清楚的知道修飾符應(yīng)用于該DOM節(jié)點上的哪個實體
  • 唯一名稱使查找代碼或文件系統(tǒng)中的實體變得更加容易

什么時候應(yīng)該用 BEM 格式

  • 使用 BEM 的訣竅是，你要知道什么時候哪些東西是應(yīng)該寫成 BEM 格式的。
  • 并不是每個地方都應(yīng)該使用 BEM 命名方式。當(dāng)需要明確關(guān)聯(lián)性的模塊關(guān)系時，應(yīng)當(dāng)使用 BEM 格式。
  • 比如只是一條公共的單獨的樣式，就沒有使用 BEM 格式的意義：
.hide {
    display: none !important;
}

命名規(guī)范

雙下劃線風(fēng)格
block-name__elem-name--mod-name--mod-val

  • 名稱以小寫拉丁字母書寫。
  • BEM實體名稱中的單詞由連字符（-）分隔。
  • 元素名稱與塊名稱之間用雙下劃線（__）分隔。
  • 布爾修飾符用雙連字符（--）與塊或元素的名稱分隔。
  • 修飾符的值與其名稱之間用雙連字符（--）分隔。
  • （重要提示：注釋（--）中的雙連字符可能會在HTML文檔驗證期間導(dǎo)致錯誤。）

CamelCase style
blockName-elemName_modName_modVal

  • 名稱以拉丁字母書寫。
  • 名稱中的每個單詞都以大寫字母開頭。
  • 塊，元素和修飾符名稱的分隔符與標(biāo)準(zhǔn)方案中的相同

React命名范式
BlockName-ElemName_modName_modVal

  • 名稱以拉丁字母書寫。
  • 塊和元素的名稱以大寫字母開頭。修飾符的名稱以小寫字母開頭。
  • 名稱中的每個單詞都以大寫字母開頭。
  • 元素名稱與塊名稱之間用單個連字符（-）分隔。
  • 修飾符的名稱和值之間的分隔符與標(biāo)準(zhǔn)方案中的相同。

沒有命名空間樣式
_available

  • 名稱以拉丁字母書寫。
  • 修飾符之前不包括塊或元素的名稱。此命名方案限制了mixs的使用，因為它無法確定修飾符屬于哪個塊或元素。

常用的CSS命名

例子

vant 組件 css 命名

使用的命名是雙下劃線風(fēng)格：block-name__element-name--modifier-name

<div class="van-doc">
    <div class="van-doc-header">
        <div class="van-doc-row">
            <div class="van-doc-header__top">
                <a class="van-doc-header__logo">搜索</a>
                <ul class="van-doc-header__top-nav">
                    <li class="van-doc-header__top-nav-item">
                        <a class="van-doc-header__logo-link">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="van-doc-container van-doc-row van-doc-container--with-simulator">
        ......
    </div>
</div>

weui 組件 css 命名

使用的命名是 React命名風(fēng)格：block-name__element-name_modifier-name

<div class="page button js_show">
    <div class="page__hd">
        <h1 class="page__title">Button</h1>
        <p class="page__desc">按鈕</p>
    </div>
    <div class="page__bd">

        <div class="button-sp-area">
            <a class="weui-btn weui-btn_primary">頁面主操作</a>
            <a class="weui-btn weui-btn_loading">頁面主操作</a>
            <a class="weui-btn weui-btn_disabled>頁面主操作</a>
            <a class="weui-btn weui-btn_default">頁面次要操作</a>
            <a class="weui-btn weui-btn_warn">警告類操作</a>
        </div>
        ....
        <div class="button-sp-area cell">

校驗 BEM 規(guī)范工具

stylelint-selector-bem-pattern

到此這篇關(guān)于CSS使用BEM命名規(guī)范實踐的文章就介紹到這了,更多相關(guān)CSS BEM命名規(guī)范內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS樣式書寫順序和命名規(guī)范及注意事項

    這篇文章主要介紹了CSS樣式書寫順序和命名規(guī)范,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-06-04

  • 值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則

    本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-10-19

  • 好的 CSS 命名規(guī)范可以節(jié)約 Debug 時間

    Debug CSS 是一種很耗時的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時間。下面通過本文給大家?guī)砹薈SS 命名規(guī)范可以節(jié)約 Debug 時間的相關(guān)知識，感興趣的朋友一起
    2018-01-23

  • css 命名：BEM, scoped css, css modules 與 css-in-js詳解

    這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，,需要的朋友
    2020-08-24

  • CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解

    這篇文章主要介紹了CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-06-28

  • 詳解css BEM書寫規(guī)范

    BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。本文主要介紹了詳解css BEM書寫規(guī)范,非常具有實用價值，需要的
    2018-12-17

  • 從QQtabBar看css命名規(guī)范BEM的詳細(xì)介紹

    這篇文章主要介紹了從QQtabBar看css命名規(guī)范BEM的問題解析，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
    2021-08-04

最新評論