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

吃瓜要吐槽 發表於 2021-7-5 15:05:00

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

<h1>一、BEM</h1>
<h2>1.1、BEM概要</h2>
在CSS类名中“--”和“__”是什么？它们的出现是源于BEM和Nicolas Gallagher
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。
http://getbem.com/
https://css-tricks.com/bem-101/
<h2>1.2、入门示例</h2>
CSS:
<div class="cnblogs_code">
<pre>/* 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;
}</pre>
</div>
HTML:
<div class="cnblogs_code">
<pre><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></pre>
</div>
结果：
<img src="https://images2018.cnblogs.com/blog/63651/201808/63651-20180829124451546-852054439.png" alt="">
 
<h2 id="introduction介绍">Introduction(介绍)</h2>
<ul>
<li>
Block
独立实体，独立的意义
<blockquote>
Examples：header, container, menu, checkbox, input
</blockquote>
</li>
<li>
Element
block的一部分，没有独立的意义。语意上和block有关系
<blockquote>
Examples：menu item, list item, checkbox caption, header title
</blockquote>
</li>
<li>
Modifier
block或element上的flag。使用他来改变外观或行为
<blockquote>
Examples：disabled, highlighted, checked, fixed, size big, color yellow
</blockquote>
</li>
</ul>
<img src="https://images2018.cnblogs.com/blog/63651/201808/63651-20180829135858711-229581495.png" alt="">
<h3 id="实例">实例</h3>
页面上一个特定的元素在BEM中的实现。
<img src="https://images2018.cnblogs.com/blog/63651/201808/63651-20180829135918888-1688747320.png" alt="">
一般情况下我们有一个正常的按钮，还有两个不同的状态。因为我们使用了BEM的风格块的类选择器，我们可以使用任何标签来实现(button,a,div)。命名规则告诉我们使用 <code>block--modifier-value</code>语法
HTML
<div class="cnblogs_code">
<pre><button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</button></pre>
</div>
CSS
<div class="cnblogs_code">
<pre>.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;
}</pre>
</div>
<h3 id="优点">优点</h3>
<ul>
<li>
模块化
block样式从来不依赖页面上的其他元素。你还可以将blocks从已经完成的项目转移到新的项目
</li>
<li>
重用性
以不同的方式组成独立的blocks，减少可维护css代码量。通过一套风格，你可以使用你的超级牛叉效果构建一个库
</li>
<li>
结构
BEM方法为你的css代码提供了一个简单易懂的结构
</li>
</ul>
<h2 id="naming命名">Naming(命名)</h2>
正确的命名可以提高开发效率、调试和实现旧代码中的功能。遗憾的是，大多数css没有任何结构和命名规范。这导致时间长了css代码不可维护。
BEM方法确保每个网站的开发人员使用单个代码库和同一种语言。使用正确的命名将会为你的网站设计改变做好准备
<ul>
<li>
Block
封装一个独立的实体，他具有意义。虽然Block可以相互嵌套，但是在语意上让他们保持相互的独立，没有优先级或层次结构。整体实体没有DOM表示(如controllers或models)也可以是Block
<ul>
<li>
Naming
Block名称可以由字母、数字和破折号组成一个类，增加一个简短的前缀为命名空间：<code>.block</code>
</li>
<li>
HTML
任何DOM节点如果接收一个类名他能成为一个Block。
<div class="cnblogs_code">
<pre><div class="block">...</div></pre>
</div>
 
</li>
<li>
CSS
<ul>
<li>仅使用类名选择器</li>
<li>没有标签名或ID</li>
<li>不依赖页面上的其他Block/Elements</li>
</ul>
<div class="cnblogs_code">
<pre>.block { color: #042; }</pre>
</div>
 
</li>
</ul>
</li>
<li>
Element
Block的一部分，没有独立的意义。任何元素在语意上是绑在他的Block上
<ul>
<li>
Naming
Elements名称可以由字母、数字、破折号和下划线。CSS类名由Block名称加两个下划线加Elements名：<code>.block__elem</code>
</li>
<li>
HTML
在给定的Block内的任何DOM都可以成为一个Elements。所有Elements在语意上相等。
<div class="cnblogs_code">
<pre><div class="block">
...
<span class="block__elem"></span>
</div></pre>
</div>
 
</li>
<li>
CSS
<ul>
<li>仅使用类名选择器</li>
<li>没有标签名或ID</li>
<li>不依赖页面上的其他Block/Elements</li>
</ul>
正确的
<div class="cnblogs_code">
<pre>css .block__elem { color: #042; }</pre>
</div>
 
错误的
</li>
<li>
<div class="cnblogs_code">
<pre>css .block .block__elem { color: #042; } div.block__elem { color: #042; }</pre>
</div>
</li>
</ul>
</li>
<li>
Modifier
在Block或Elements上的Flags，使用它们来改变外观、行为或状态。
<ul>
<li>
Naming
Modifier名称可以由字母、数字、破折号和下划线。CSS类名由Block或Element的名称加上两个破折号。<code>.block--mod</code>或<code>.block__elem--mod</code>和<code>.block--color-black</code>与<code>.block--color-red</code>Spaces in complicated modifiers are replaced by dash.
</li>
<li>
HTML
Modifier是添加到你的Block/Elements类名中额外的扩展。只给Block/Elements他们的修饰添加Modifier，并且保持他们原来的类
正确的
<div class="cnblogs_code">
<pre><div class="block block--mod">...</div> <div class="block block--size-big block--shadow-yes">...</div></pre>
</div>
 
错误的
<div class="cnblogs_code">
<pre><div class="block--mod">...</div></pre>
</div>
</li>
<li>
CSS
使用Modifier的类名选择：
</li>
<li>
<div class="cnblogs_code">
<pre>.block--hidden { }</pre>
</div>
</li>
<li>
 
改变Elements基于一个块级Modifier:
<div class="cnblogs_code">
<pre>.block--mod .block__elem { }</pre>
</div>
 
Elements Modifier
<div class="cnblogs_code">
<pre>.block__elem--mod { }</pre>
</div>
 
</li>
</ul>
</li>
</ul>
<h3 id="example">Example</h3>
假设你有一个From Block与modifiers<code>theme: "xmas</code>和<code>simple: true</code>和elements<code>input</code>、<code>submit</code>和元素<code>submit</code>他具有自己的修饰符<code>disabled: true</code>没填写表单时的样式。
<ul>
<li>
HTML
<div class="cnblogs_code">
<pre><form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form></pre>
</div>
</li>
<li>
CSS
<div class="cnblogs_code">
<pre>.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }</pre>
</div>
</li>
</ul>
一、什么是BEM？
　　BEM代表块（Block），元素（Element），修饰符（Modifier）。无论是什么网站页面，都可以拆解成这三部分。
二、带你认识网页
　　我们来看一下qq的官网，它可以由三个块组成：logo，导航nav和页面主题mian三个模块构成，如果再细分一下呢？logo是由图片和文字两个元素组成，导航由三个元素组成，页面主题中包含图片，文字和按钮三个元素，
如果把一个块看作是一个数组的话，那么元素就是数组中的每一项。
　　什么是修饰符呢？你可以看作是元素的属性，或者是他的形态、状态，比如导航中的三个元素有的长，有的短，页面主体文字有的大，有的小
<img src="https://img2018.cnblogs.com/blog/1412010/201901/1412010-20190112160106389-483776735.png" alt="" width="843" height="447">
三、BEM命名如何书写
　　BEM给我们的规定是块和元素之间用 — 连接，元素和修饰符之间用 _  连接。例如：我们要设置表格某一行的背景颜色为红色，我们可以如下命名
<div class="cnblogs_code">
<pre><div class="table-row_red"></div></pre>
</div>
 
四、实战篇
　　下面，我们来用bem的命名规范来写一下qq的官网
<div class="cnblogs_code">
<pre>　　<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></pre>
</div>
 
是不是清晰了很多，即使是换作另一个人修改这个页面也是一眼就能找到的。这样就大大减少了我们的维护成本。
五、拓展
　　 

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

<img src="https://img2018.cnblogs.com/blog/1412010/201901/1412010-20190112164616581-803756344.png" alt="">

　　上面是一张小女孩的人体结构图，我们可以把她分成三个部门，也就是三个块（Block），分别是头（header），身体(body)和脚(footer)，我们单看头部，里边有很多个元素（Element）组成，比如头发（hair）、眼睛（eye）、耳朵（ear）、牙齿（tooth）等等，
身体里呢？包含胳膊（arm）、手指（finger）等元素构成，脚部由脚（foot）和脚趾（toe）组成。小女孩的头发是棕色的(brown)，好了，我们可以用BEM规范来命名一下小女孩的结构了
<div class="cnblogs_code">
<pre> <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></pre>
</div>
 
 
六、结束语
　　BEM是一个非常有用，强大，简单的命名约定，以至于让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确而且更加严密。它对前端开发者都是一个巨有价值的工具。
  
来源：https://www.cnblogs.com/best/p/9553618.html

頁: [1]

琼殿技术论坛's Archiver

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