前端工程化详解

# 命名规范

# 文件名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。

|- normalize.less
|- base.less
|- date-picker.scss
|- input-number.css

成功
1
2
3
4

# 命名空间

css 命名遵循代码的语义化

  • 样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、中划线 （-）、下划线（_）组成。

  • 可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…,red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class="left-news"、class="2" ，以避免当状态改变时名称失去意义。尽量用单个单词简单描述class名称。

  • 双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：news-list、mod-feeds、mod-my-feeds、cell-title

常见命名单词如下：

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

成功
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
29
30
31
32
33
34
35
36

# 命名格式

css命名格式应按照BEM规范

BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由Yandex团队提出的一种CSS命名方法。

其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。

  • 避免样式冲突
  • 减小名称长度
  • 提高可阅读性
  • 增加样式重用

规范默认以.block__element--modifier为标准，有以下的几个约定。实际使用可自行统一，重在思想：

  • 中划线：仅作为连字符使用 -- 双中划线：表示不同状态或不同版本 __ 双下划线：双下划线用来连接块和块的子元素
<div class="dropdown-menu__item--active"></div>

成功
1

# Block

一个功能独立的页面组件，可以重复使用

块不应影响其环境，这意味着不应设置块的外部几何形状（边距）或位置

<!-- good -->
<div class="header"> </div >
 
<!-- bad，red-text 是描述外观 -->
<div class="red-text"> </div>

成功
1
2
3
4
5

# Element

块的复合部分，不能单独使用

元素全名的结构为block-name__element-name

一个元素始终是块的一部分，因此元素名称不可定义为 block__elem1__elem2 的层次结构

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

成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Modifier

定义块或元素的外观，状态或行为的实体

修饰符的两种类型

建议

使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义

← 书写风格 →