前端编程规范

发表于 | 更新于 | 分类于 ，

🐰
目前编程中自己首选的一些规范

待看文章

CSS

目前书写css所用的预处理器为：sass

规范选择的是：

使用Sass来写OOCSS

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 好的方式 */
%btn {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%twitter-bg {
  color: #fff;
  background: #55acee;
}
%facebook-bg {
  color: #fff;
  background: #3b5998;
}

.btn {
  &-twitter {
    @extend %btn;
    @extend %twitter-bg;
  }
  &-facebook {
    @extend %btn;
    @extend %facebook-bg;
  }
}

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@charset "UTF-8";
/* 好的方式 */
.btn-facebook, .btn-twitter {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}

.btn-twitter {
  color: #fff;
  background: #55acee;
}

.btn-facebook {
  color: #fff;
  background: #3b5998;
}

HTML中使用

1
2
<div class="btn-twitter"></div>
<div class="btn-facebook"></div>

CSS命名

参考几种设计规范的思想，目前采取的是OOCSS结合SMACSS命名（语法基于sass）

使用规范

利用OOCSS思想来提取公共类

1
2
3
4
5
6
7
8
// 可以分成几大类

// 这类数字的可以用sass的循环语法一次性生成
.mt20 { margin-top: 20px }

.tc { text-align: center }
.abs { position: absolute }
.clearfix:after { content: ‘’; display: block; clear: both; height: 0 }

利用SMACSS思想来给具体的dom命名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 某个页面的dom
.index {
    &-top {
        
    }
    &-middle {
        
    }
    &-bottom {
        
    }
}

// 自定义可复用的dom样式（此处利用@extend再次复用公共类）
.btn-red {
    @extend .btn;
    color: red;
}

对于一些状态类的样式有两种方法

1
2
3
4
5
6
7
8
// 直接定义在公共类中（这个适用于该状态样式能多次复用的情况）
.active {}

// 在类名中体现 （这个状态很少使用的时候）
.btn-red-active {
    @extend .btn-red
    // 该状态的样式代码
}

OOCSS

面向对象的CSS，主要思想是 “结构和设计的分离，容器和内容的分离”
简单的说就是抽象公共类，把复用度高的样式抽取出来，例如：

1
2
3
4
.mt20 { margin-top: 20px }
.tc { text-align: center }
.abs { position: absolute }
.clearfix:after { content: ‘’; display: block; clear: both; height: 0 }

SMACSS

可扩展和模块化结构 CSS 的一个简称。
主要目标是 减少代码量，简化代码的维护。
在整个系列中，包括了base，modules，staes，themes。修饰符使用的是–，子模块使用__符号。

  • Base 基本规则，整体样式，比如 body、input、button、form
  • Layout 布局规则，比如 顶部，页脚，边栏，模块的大小等
  • Module 可复用的模块样式规则
  • State 状态样式 比如 隐藏 当前高亮
  • Theme 主题 控制整体UI

BEM

BEM 是一种前端项目开发的方法学，由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。这三个不同的组成部分称为 BEM 实体。

  • Block——块

    块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。块中封装了组件相关的 JavaScript、CSS 代码和 HTML 模板。由于块是独立的，可以在应用开发中进行复用，从而降低代码重复并提高开发效率。块可以放置在页面上的任何位置，也可以互相嵌套。

  • Element——元素

    元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

  • Modifier——修饰符

    修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。

1
2
3
4
// 简单地说
.block { /* styles */ }
.block__element { /* styles */ } 
.block--modifier { /* styles */ }

举个栗子

如何使用呢BEM命名方法呢？请先看以下例子：

1
2
3
4
5
6
//我们要为这个菜单写样式
<ul class="">
    <li class="">Menu Item 1</li>
    <li class="">Menu Item 2</li>
    <li class="">Menu Item 3</li>
</ul>

“祖传”命名

放在以前，我们或许会这么写：

1
2
3
4
5
<ul class="nav">
    <li class="item selected">Menu Item 1</li>
    <li class="item">Menu Item 2</li>
    <li class="item">Menu Item 3</li>
</ul>

看了一下，还是多清爽的。但是各位朋友是否注意到了一个问题：子元素item和其父元素menu，从命名上看，关系似乎太不紧密。一个box也可以有item子类，一个xxx也可以包含一个item子类。看看其样式的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//sass
.nav {
   list-style: none;
   .item {
       font-weight: bold;
      &.selected {
           color: red;
           }
      }
 }
 
//编译后产生的css
.nav {
 list-style: none;
}
.nav .item {
 font-weight: bold;
}
.nav .item.selected {
 color: red;
}

从样式文件上看，仿佛也没有太大问题，但是，这是在我们代码层数较少的情况。如果是一个复杂的页面元素，我们sass层级会非常深。编译后的css，层级也会很深。

BEM命名

现在我们使用BEM再来编写看看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<ul class="nav">
    <li class="nav__item nav__item--selected">Menu Item 1</li>
    <li class="nav__item">Menu Item 2</li>
    <li class="nav__item">Menu Item 3</li>
</ul>
//sass
.nav {
 list-style: none;

 &__item {
   font-weight: bold;

   &--selected {
     color: red;
   }
 }
}

//使用sass编译后的css是
.nav {//菜单
 list-style: none;
}
.nav__item {//菜单item
 font-weight: bold;
}
.nav__item--selected { //被选中的菜单item
 color: red;
}

乍看之下，根据 BEM 命名规则产生的 CSS 类名都会很复杂，但实际上在熟悉了命名规则之后，可以很容易理解其含义。其次，css不再存在复杂的层级关系，浏览器渲染的时候，样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出，减少层级就能提升性能，对应静态css文件大小也会减少。

很多人会吐槽两个下划线和两个横杠作为连接符，并不优雅。但是我觉得，BEM是一种思想，是我们需要理解的，至于我们用什么样的连接符，什么样的方式实现，可以根据自己项目的情况考虑。


参考文章：

https://segmentfault.com/a/1190000012633974

------------- 本文到此结束啦 感谢您的阅读 ♪(＾∀＾●)ﾉ -------------
0%