CSS3与页面布局学习总结（九）——前端开发规范

一、BEM

1.1、BEM概要

在CSS类名中“--”和“__”是什么？它们的出现是源于BEM和Nicolas Gallagher

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

http://getbem.com/

https://css-tricks.com/bem-101/

1.2、入门示例

CSS:

/* Block */
.btn {
  text-decoration: none;
  background-color: white;
  color: #888;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 5px;
}

/* Element */
.btn__price {
  background-color: white;
  color: #fff;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: -10px; /* realign button text padding */
  font-weight: 600;
  background-color: #333;
  opacity: .4;
  border-radius: 5px 0 0 5px;
}

/* Element */
.btn__text {
  padding: 0 10px;
  border-radius: 0 5px 5px 0;
}

/* Modifier */
.btn--big {
  font-size: 28px;
  padding: 10px;
  font-weight: 400;
}

/* Modifier */
.btn--blue {
  border-color: #0074D9;
  color: white;
  background-color: #0074D9;
}

/* Modifier */
.btn--orange {
  border-color: #FF4136;
  color: white;
  background-color: #FF4136;
}

/* Modifier */
.btn--green {
  border-color: #3D9970;
  color: white;
  background-color: #3D9970;
}


body {
  font-family: "fira-sans-2", sans-serif;
  background-color: #ccc;
}

HTML:

<a href="http://git.oschina.net/" class="btn">
  <span class="btn__text">Standard button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--orange btn--big">
  <span class="btn__price">$3</span>
  <span class="btn__text">Big button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--blue btn--big">
  <span class="btn__price">$4</span>
  <span class="btn__text">Big button</span>
</a>

<a href="http://git.oschina.net/" class="btn btn--green btn--big">
  <span class="btn__price">$9</span>
  <span class="btn__text">Big button</span>
</a>

结果：

 

Introduction(介绍)

  • Block

    独立实体，独立的意义

    Examples：header, container, menu, checkbox, input

  • Element

    block的一部分，没有独立的意义。语意上和block有关系

    Examples：menu item, list item, checkbox caption, header title

  • Modifier

    block或element上的flag。使用他来改变外观或行为

    Examples：disabled, highlighted, checked, fixed, size big, color yellow

实例

页面上一个特定的元素在BEM中的实现。

一般情况下我们有一个正常的按钮，还有两个不同的状态。因为我们使用了BEM的风格块的类选择器，我们可以使用任何标签来实现(button,a,div)。命名规则告诉我们使用 block--modifier-value语法

HTML

<button class="button">
    Normal button
</button>
<button class="button button--state-success">
    Success button
</button>
<button class="button button--state-danger">
    Danger button
</button>

CSS

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

优点

  • 模块化

    block样式从来不依赖页面上的其他元素。你还可以将blocks从已经完成的项目转移到新的项目

  • 重用性

    以不同的方式组成独立的blocks，减少可维护css代码量。通过一套风格，你可以使用你的超级牛叉效果构建一个库

  • 结构

    BEM方法为你的css代码提供了一个简单易懂的结构

Naming(命名)

正确的命名可以提高开发效率、调试和实现旧代码中的功能。遗憾的是，大多数css没有任何结构和命名规范。这导致时间长了css代码不可维护。

BEM方法确保每个网站的开发人员使用单个代码库和同一种语言。使用正确的命名将会为你的网站设计改变做好准备

  • Block

    封装一个独立的实体，他具有意义。虽然Block可以相互嵌套，但是在语意上让他们保持相互的独立，没有优先级或层次结构。整体实体没有DOM表示(如controllers或models)也可以是Block

    • Naming

      Block名称可以由字母、数字和破折号组成一个类，增加一个简短的前缀为命名空间：.block

    • HTML

      任何DOM节点如果接收一个类名他能成为一个Block。

      <div class="block">...</div>

       

    • CSS

      • 仅使用类名选择器
      • 没有标签名或ID
      • 不依赖页面上的其他Block/Elements
      .block { color: #042; }

       

  • Element

    Block的一部分，没有独立的意义。任何元素在语意上是绑在他的Block上

    • Naming

      Elements名称可以由字母、数字、破折号和下划线。CSS类名由Block名称加两个下划线加Elements名：.block__elem

    • HTML

      在给定的Block内的任何DOM都可以成为一个Elements。所有Elements在语意上相等。

      <div class="block">
  ...
  <span class="block__elem"></span>
</div>

       

    • CSS

      • 仅使用类名选择器
      • 没有标签名或ID
      • 不依赖页面上的其他Block/Elements

      正确的

      css .block__elem { color: #042; }

       

      错误的

    • css .block .block__elem { color: #042; } div.block__elem { color: #042; }

  • Modifier

    在Block或Elements上的Flags，使用它们来改变外观、行为或状态。

    • Naming

      Modifier名称可以由字母、数字、破折号和下划线。CSS类名由Block或Element的名称加上两个破折号。.block--mod或.block__elem--mod和.block--color-black与.block--color-redSpaces in complicated modifiers are replaced by dash.

    • HTML

      Modifier是添加到你的Block/Elements类名中额外的扩展。只给Block/Elements他们的修饰添加Modifier，并且保持他们原来的类

      正确的

      <div class="block block--mod">...</div> <div class="block block--size-big block--shadow-yes">...</div>

       

      错误的

      <div class="block--mod">...</div>

    • CSS

      使用Modifier的类名选择：

    • .block--hidden { }

    •  

      改变Elements基于一个块级Modifier:

      .block--mod .block__elem { }

       

      Elements Modifier

      .block__elem--mod { }

       

Example

假设你有一个From Block与modifierstheme: "xmas和simple: true和elementsinput、submit和元素submit他具有自己的修饰符disabled: true没填写表单时的样式。

  • HTML

    <form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

  • CSS

    .form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

一、什么是BEM？

　　BEM代表块（Block），元素（Element），修饰符（Modifier）。无论是什么网站页面，都可以拆解成这三部分。

二、带你认识网页

　　我们来看一下qq的官网，它可以由三个块组成：logo，导航nav和页面主题mian三个模块构成，如果再细分一下呢？logo是由图片和文字两个元素组成，导航由三个元素组成，页面主题中包含图片，文字和按钮三个元素，

如果把一个块看作是一个数组的话，那么元素就是数组中的每一项。

　　什么是修饰符呢？你可以看作是元素的属性，或者是他的形态、状态，比如导航中的三个元素有的长，有的短，页面主体文字有的大，有的小

三、BEM命名如何书写

　　BEM给我们的规定是块和元素之间用 — 连接，元素和修饰符之间用 _  连接。例如：我们要设置表格某一行的背景颜色为红色，我们可以如下命名

<div class="table-row_red"></div>

 

四、实战篇

　　下面，我们来用bem的命名规范来写一下qq的官网

　　<header>
        <div class="logo">
            <img class="logo-img" src="./logo.png" alt="">
            <span class="logo-words_big">QQ·</span>
            <span class="logo-word_small">PC版</span>
        </div>
        <ul class="nav">
            <li class="nav-item">QQ官网首页</li>
            <li class="nav-item">申请QQ</li>
            <li class="nav-item">当前在线用户:2559393943</li>
        </ul>
    </header>
    <div class="main">
        <img class="main-img" src="./img.png" alt="" >
        <div class="main-words_small">QQ PC版9.0.8</div>
        <div class="main-words_big">从新出发·趣无止境</div>
        <button class="mian-button_blue">立即下载</button>
    </div>

 

是不是清晰了很多，即使是换作另一个人修改这个页面也是一眼就能找到的。这样就大大减少了我们的维护成本。

五、拓展

　　

　　如果你还是不太理解什么是BEM，没关系，我们和人体结合一下，看看他们之间有什么相似之处。

　　上面是一张小女孩的人体结构图，我们可以把她分成三个部门，也就是三个块（Block），分别是头（header），身体(body)和脚(footer)，我们单看头部，里边有很多个元素（Element）组成，比如头发（hair）、眼睛（eye）、耳朵（ear）、牙齿（tooth）等等，

身体里呢？包含胳膊（arm）、手指（finger）等元素构成，脚部由脚（foot）和脚趾（toe）组成。小女孩的头发是棕色的(brown)，好了，我们可以用BEM规范来命名一下小女孩的结构了

    <div class="header">
        <div class="header-hair_brown"></div>
        <div class="header-eye"></div>
        <div class="header-ear">
            <div class="header-ear_left"></div>
            <div class="header-ear_right"></div>
        </div>
        .......
    </div>
    <div class="body">
        <div class="body-arm">
            <div class="body-arm_left"></div>
            <div class="body-arm_right"></div>
        </div>
        <div class="finger"></div>
        .......
    </div>
    <div class="footer">
        <div class="footer-foot"></div>
        <div class="footer-toe"></div>
    </div>

 

 

六、结束语

　　BEM是一个非常有用，强大，简单的命名约定，以至于让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确而且更加严密。它对前端开发者都是一个巨有价值的工具。

 

posted @ 2021-07-05 15:05  张果  阅读(346)  评论(0)  编辑  收藏  举报
AmazingCounters.com