- 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
3Block - 模块,名字的单词之间用 `-` 符号连接
Element - 元素,模块中的子元素,用 `__` 符号连接
Modifier - 修饰符,表示父元素或子元素的其他形态,用 `--` 符号连接
在没用 BEM 之前,我们可能会这样组织 CSS 类名:
1 | <!-- S Search Bar 模块 --> |
上述写法虽然也给 class 赋予了一定的语义,但容易产生样式冲突的情况。
用 BEM 命名重写之后:
1 | <!-- S Search Bar 模块 --> |
这样命名的好处是,模块语义化了,便于后期的维护,而且减少了 CSS 样式的层层嵌套,提升了网页的渲染效率。
通常在开发中使用 BEM 命名方法,会搭配 CSS 的预处理语言,如 SCSS 等。这可以一定程度上解决手写冗长命名的繁琐。
1 | // 以下是 SCSS 代码 |
使用凹凸实验室的 改造版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>前端布局命名规范
前端布局规范细则
命名规范:
基本要求:
- 文件编码统一使用 UTF-8 编码;
- 命名时以符合语义为主要参考指标,CSS属性书写规范,采用统一风格及命名方法;
- 结构清晰,层级关系明朗,以不超过三级为标准;
- 同一表现形式的样式要求可重复利用,模块组件类的样式要求可整体外部移植;
- 编写 CSS 的时候,应当避免使用CSS Hack,能不用则不用。
- 所有页面默认都针对Firefox 等最接近标准的浏览器进行设计,然后使用 IE 特有条件注释功能进行针对性修正。
- 请使用英文进行命名,尽量避免使用拼音。命名要求具有可读性,尽量避免使用缩写。命名虽然允许数字,但应尽量避免使用数字命名。
命名方法 要求采用统一的命名方法。常用命名方法有:
- 连写式命名法,如:helloworld
- 中线命名法,如:hello-world(目前采用此方法的较多,建议采用.
- 下划线命名法,如:hello_world
- 骆驼命名法,如:helloWorld
- 帕斯卡命名法,如:HelloWorld
- 其他方法。
样式文件命名规范 如:
1 | 全局的:global.css; |
ID及Class命名常用名称
1 | 页头:header |