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)

原文作者: 2rever

原文链接: https://2rever.cn/2018/08/19/html、css命名规范/

发表日期: August 19th 2018, 8:33:58 pm

版权声明: 本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

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命名常用名称
Total : 24
2019
2018