前端代码规范系列 — css命名(BEM)、属性值、字体排版、选择器相关

2020年8月20日21:53:29 发表评论 125 views

一.命名规范(BEM规范)

BEM规范是一种主流的css命名规范,BEM分别对应的是block , element 和 modifier,为的是结束混乱的命名方式,达到一个语义化的CSS命名方式。

1.1 什么是Block

在BEM规范中,block(块)表示一个组件的意思,假设你要写一个按钮的组件,只需要设置一个 .button 类的按钮,然后可以在任何按钮上使用该类,就可以生成该组件的传统样式。在BEM 中,块被写为和 class 的名字一样,如下所示:

.button {
}

.header {
}
复制代码

BEM 使用 .button 而不是直接使用<button>元素的原因是因为类名具有无限的可复用性。举个例子,如果将 <button> 元素的背景颜色设置为红色,则所有 都将被强制继承红色背景。如果你要给你页面上某个按钮设置不同的颜色,你必须通过覆盖你的 <button> 元素来修复代码,这种方式不仅仅会使你的css代码杂乱无章,并且可能会让各个<button>元素之互相影响。

/* good */
.button { background-color: red; } 
.button--secondary { background-color: blue; }

/* bad */
button { background-color: red; } 
.parent button { background-color: blue;}
复制代码

如上正确示范代码所示,如果设置了一个 .button 类的按钮,则可以在任何 <button> 元素上选择是否使用 .button 类。那么,如果你需要一个不同的背景颜色,你所做的就是改成一个新的 class,比如说 .button--secondary,而这里的--secondary,其实就是下面会讲到的修饰符(modifier)。

1.2 什么是Element

元素是块的子节点,元素表示的是目的,而不是状态。块与元素之间用一个双下划线隔开,所以,如果你看到一个例如.form__row这样的类名 ,你会马上知道 .form 块中有一个 row 元素。

/* good */
.form__row {
  
}

/* bad */
.form .row {
  
}
复制代码

要特别注意的是,对于Element来说,不能脱离Block父级单独使用,如下代码所示:

/* good */
<header class="header">
  <p class="header__body"></p>
</header>

/* bad */
<header>
  <p class="header__body"></p>
</header>
复制代码

1.3 什么是Modifier

修饰符是改变某个块的外观的标志。要使用修饰符,用一个双短横线线隔开,从上面1.1的示例中可以看到,修改的按钮将被命名为 .button--secondary,--secondary就是一个修饰符,

.header--first {
    
}

.header__button--selected {
    
}
复制代码

同样要特别注意的是,对于Modifier来说,不能脱离Block和Element父级单独使用,如下代码所示:

  /* good */
<p class="header">
    <p class="header__body">
        <button class="header__button header__button--primary"></button>
        <button class="header__button header__button--default"></button>
    </p>
</p>

/* bad */
<p>
    <p>
        <button class="header__button--primary"></button>
        <button class="header__button--default"></button>
    </p>
</p>
复制代码

二.属性值

2.1 数值

当数值为 0 - 1 之间的小数时,建议省略整数部分的 0。

/* good */
.panel {
  opacity: .8
}

/* bad */
.panel {
  opacity: 0.8
}
复制代码

2.2 长度

当长度为 0 时建议省略单位。

/* good */
.list {
  padding: 0 5px;
}

/* bad */
.list {
  padding: 0px 5px;
}
复制代码

2.3 颜色

建议不使用命名色值。

/* good */
.button--success {
  color: #90ee90;
}

/* bad */
.button--success {
  color: lightgreen;
5.2 字重
[强制] font-weight 属性必须使用数值方式描述。
复制代码

2.4 清除浮动

建议当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

2.5 !important

除公共样式之外,在业务代码中尽量不能使用 !important

2.6 z-index

建议将 z-index 进行分层,对文档流外绝对定位元素的视觉层级关系进行管理。

三.字体排版

3.1 字号

因为 Windows 的字体渲染机制,小于 12px 的文字显示效果极差、难以辨认。所以在 Windows 平台显示的中文内容,其字号应不小于 12px。

3.2 字重

font-weight 属性建议使用数值方式描述。

 /* good */
h1 {
   font-weight: 700;
}

/* bad */
h1 {
   font-weight: bold;
}
复制代码

3.3 行高

line-height 在定义文本段落时,应使用数值。将line-height 设置为数值,浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中,能达到较为舒适的行间间隔效果,避免在每个设置了 font-size 都需要设置line-height。如果line-height 用于控制垂直居中,应该设置成与容器高度一致。

 /* good */
 .container {
   line-height: 1.5;
 }
 

/* bad */
.container {
   line-height: 15px;
 }
复制代码

四.选择器相关

4.1 不要为 id、class 选择器添加类型选择器

既不太美观之外,同时也会影响性能。

/* good */
#error,.message {
  font-color: #c00;
}

/* bad */
input#error,p.message {
  font-color: #c00;
}

作者:关索
链接:https://juejin.im/post/6862187926849159182
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: