CSS应用BEM取名标准实⊙﹏⊙践活动

日期:2021-01-21 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

如果你见到一个class的情况下,你要获得甚么信息内容?

  • 这一class用在哪儿,功效是啥?
  • 是不是在别的地区也是有应用该class,改动是否会造成别的地区的款式难题?
  • class 是不是在js中被应用?
  • ......

这时,你最想一眼见到这一class就处理之上全部的难题,而BEM你非常值得有着

什么叫BEM

BEM(块,原素,装饰符)是根据部件的Web开发设计的一种前端开发取名科学方法论,关键对于CSS。其身后的念头是将客户页面分成单独的块。即便应用繁杂的UI,这也使页面开发设计越来越非常容易和迅速,而且容许器重目前编码而不用拷贝和黏贴。

优点

  • 防止款式矛盾
  • 减少名字长短
  • 提升可阅读文章性
  • 提升款式器重

如何应用BEM

Block

一个作用单独的网页页面部件,能够反复应用

块不可危害其自然环境,这寓意着您不可设定块的外界几何图形样子(行高)或部位

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

<!--
    bad
    red-text 是叙述外型
-->
< div  class = "red-text" > </ div >

Element

块的复合型一部分,不可以独立应用

原素全称的构造为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 的层级构造

<!--
    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>

原素自始至终是一个块的一一部分,您不可该与该块分离应用

<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

界定块或原素的外型,情况或个人行为的实体线

装饰符的二种种类

Boolean

装饰符全称的构造遵照下列方式:

  • 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

装饰符全称的构造遵照下列方式:

  • 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
        不能同时应用2个不一样值的同样装饰符 
    -->
    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
   </button>
</form>

不可以将装饰符与装饰的块或原素防护应用。装饰符应变更实体线的外型,个人行为或情况,而并不是更换它

<!--
    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>

在装饰符和原素名字中加上块名字的益处

  • 有利于于降低一个块的原素和装饰符对另外一个块的完成的危害
  • 可更清晰的了解装饰符运用于该DOM连接点上的哪一个实体线
  • 唯一位称使搜索编码或文档系统软件中的实体线越来越更为非常容易

何时应当用 BEM 文件格式

  • 应用 BEM 的技巧是,你需要了解何时什么物品是应当写出 BEM 文件格式的。
  • 其实不是每一个地区都应当应用 BEM 取名方法。当必须确立关系性的控制模块关联时,理应应用 BEM 文件格式。
  • 例如仅仅一条公共性的独立的款式,就沒有应用 BEM 文件格式的实际意义:
.hide {
    display: none !important;
}

取名标准

双下横线设计风格
block-name__elem-name--mod-name--mod-val

  • 名字以小写拉丁英文字母撰写。
  • BEM实体线名字中的英语单词由连标识符(-)隔开。
  • 原素名字与块名字中间用双下横线(__)隔开。
  • 布尔运算装饰符用双连标识符(--)与块或原素的名字隔开。
  • 装饰符的值两者之间名字中间用双连标识符(--)隔开。
  • (关键提醒:注解(--)中的双连标识符将会会在HTML文本文档认证期内造成不正确。)

CamelCase style
blockName-elemName_modName_modVal

  • 名字以拉丁英文字母撰写。
  • 名字中的每一个英语单词都以英文大写英文字母开始。
  • 块,原素和装饰符名字的隔开符与规范计划方案中的同样

React取名现代性
BlockName-ElemName_modName_modVal

  • 名字以拉丁英文字母撰写。
  • 块和原素的名字以英文大写英文字母开始。装饰符的名字以小书写母开始。
  • 名字中的每一个英语单词都以英文大写英文字母开始。
  • 原素名字与块名字中间用单独连标识符(-)隔开。
  • 装饰符的名字和值中间的隔开符与规范计划方案中的同样。

沒有取名室内空间款式
_available

  • 名字以拉丁英文字母撰写。
  • 装饰符以前不包含块或原素的名字。此取名计划方案限定了mixs的应用,由于它没法明确装饰符归属于哪一个块或原素。

常见的CSS取名

事例

vant 部件 css 取名

应用的取名是双下横线设计风格: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取名设计风格: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 标准专用工具

stylelint-selector-bem-pattern

到此这篇有关CSS应用BEM取名标准实践活动的文章内容就详细介绍到这了,大量有关CSS BEM取名标准內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!