2rever的前端小站

html和css的命名规范

Word count: 1,212 / Reading time: 5 min
2018/08/19 Share
  • html和css的命名规范

    语义化html标签

  • 语义化html元素不仅有利于代码维护,还利于网页的SEO
    1
    2
    3
    4
    5
    6
    7
    <header></header>  //头部
    <nav></nav> //导航
    <aside></aside> //一边
    <article> //文章
    <section></section> //部分
    </article>
    <footer></footer> //页脚

Css命名规范

BEM规范

  • BEM 是一种基于组件的命名方法,它的基本思想是将用户界面划分成独立的模块,即使是复杂的用户界面,也能让开发过程变得简单、快速。并且可以在一定程度上提高代码的可复用性,而不用纯粹的复制粘贴。

  • BEM 的意思就模块(Block. 、元素(Element. 、修饰符(Modifier. ,使用这种命名方式可以让 CSS 的类名变得有实际意义且能自我解释,具有更高的开发友好性。

    1
    2
    3
    Block - 模块,名字的单词之间用 `-` 符号连接
    Element - 元素,模块中的子元素,用 `__` 符号连接
    Modifier - 修饰符,表示父元素或子元素的其他形态,用 `--` 符号连接

在没用 BEM 之前,我们可能会这样组织 CSS 类名:

1
2
3
4
5
6
7
8
<!-- S Search Bar 模块 -->
<div class="search-bar">
<input class="input">
<!-- / input 输入框 -->
<button class="btn">
<!-- / button 搜索按钮 -->
</div>
<!-- E Search Bar 模块 -->

上述写法虽然也给 class 赋予了一定的语义,但容易产生样式冲突的情况。

用 BEM 命名重写之后:

1
2
3
4
5
6
7
8
<!-- S Search Bar 模块 -->
<div class="search-bar">
<input class="search-form__input"/>
<!-- / input 输入框子元素 -->
<button class="search-form__button"></button>
<!-- / button 搜索按钮子元素 -->
</div>
<!-- E Search Bar 模块 -->

这样命名的好处是,模块语义化了,便于后期的维护,而且减少了 CSS 样式的层层嵌套,提升了网页的渲染效率。

通常在开发中使用 BEM 命名方法,会搭配 CSS 的预处理语言,如 SCSS 等。这可以一定程度上解决手写冗长命名的繁琐。

1
2
3
4
5
// 以下是 SCSS 代码
.search-bar {
&__input { ... }
&__button { ... }
}
  • 使用凹凸实验室的 改造版BEM规范。

  • 为了进一步简化 CSS 的命名,我们凹凸实验室团队推广的 CSS 命名规范并不严格遵循 BEM 规范,不强制使用两个下划线「_ _ 」来分隔 B 和 E,而 E 和 M 之间也不一定要用两个中划线做分隔「- -」。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="app_market_answer">
    <div class="app_market_secheader"></div>
    <div class="app_market_answer_list">
    <div class="app_market_answer_item">
    <div class="app_market_answer_itop"></div>
    <div class="app_market_answer_imid"></div>
    <a href="javascript:;" class="app_market_answer_ibtn">去围观</a>
    </div>
    </div>
    </div>

    前端布局命名规范

  • 前端布局规范细则

命名规范:

基本要求:

  1. 文件编码统一使用 UTF-8 编码;
  2. 命名时以符合语义为主要参考指标,CSS属性书写规范,采用统一风格及命名方法;
  3. 结构清晰,层级关系明朗,以不超过三级为标准;
  4. 同一表现形式的样式要求可重复利用,模块组件类的样式要求可整体外部移植;
  5. 编写 CSS 的时候,应当避免使用CSS Hack,能不用则不用。
  6. 所有页面默认都针对Firefox 等最接近标准的浏览器进行设计,然后使用 IE 特有条件注释功能进行针对性修正。
  7. 请使用英文进行命名,尽量避免使用拼音。命名要求具有可读性,尽量避免使用缩写。命名虽然允许数字,但应尽量避免使用数字命名。

命名方法 要求采用统一的命名方法。常用命名方法有:

  1. 连写式命名法,如:helloworld
  2. 中线命名法,如:hello-world(目前采用此方法的较多,建议采用.
  3. 下划线命名法,如:hello_world
  4. 骆驼命名法,如:helloWorld
  5. 帕斯卡命名法,如:HelloWorld
  6. 其他方法。

样式文件命名规范 如:

1
2
3
4
5
6
7
8
9
全局的:global.css;
主要的:master.css;
布局、版面:layout.css;
专栏:columns.css;
文字:font.css;
打印样式:print.css;
主题:themes.css;
补丁:pacth.css;
格式化浏览器:base.css等。

ID及Class命名常用名称

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
页头:header
登录条:login-bar
标志:logo
侧栏:side-bar
广告:banner
导航:nav
子导航:sub-nav
菜单:menu
子菜单:sub-menu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
版权:copyright
外套:wrap
页脚:footer
标题:title
顶导航:top-nav(mini-nav)
CATALOG
  1. 1. 语义化html标签
  2. 2. Css命名规范
    1. 2.1. BEM规范
  3. 3. 前端布局命名规范
  4. 4. 命名规范:
    1. 4.1. 基本要求:
    2. 4.2. 命名方法 要求采用统一的命名方法。常用命名方法有:
    3. 4.3. 样式文件命名规范 如:
    4. 4.4. ID及Class命名常用名称