# 命名规范

# 文件名

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

|- 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 格式的意义