前端代码规范-CSS
CSS规范
一.命名规范BEM(Block Element Modifier)
1.Block name
-- 实体名称中的单词之间用连字符分隔(-)
HTML
<div class="menu">...</div>
<div class="menu-name">...</div>
CSS
.menu { color: red; }
.menu-name { color: red; }
2.Element name
-- 元素名与块名之间用双下划线分隔(__)
-- 需要注意的是不要出现block__elem1__elem2类似的命名,因为元素总是块的一部分,而不是另一个元素的。
HTML
<div class="menu">
...
<span class="menu__item"></span>
</div>
CSS
.menu__item { color: red; }
3.Block modifier name
-- 修饰符与块或元素的名称之间用双连字符分隔(--)
-- 修饰语的值与其名称之间用双连字符分隔(--)
HTML
<div class="menu menu--hidden"> ... </div>
<div class="menu menu--theme--islands"> ... </div>
CSS
.menu--hidden { display: none; }
.menu--theme--islands { color: green; }
Example:
HTML
<header class="header">
<img class="logo">
<form class="search-form">
<input class="search-form__input search-form__input--focus">
<button class="search-form__button search-form__button--size--s"></button>
</form>
<ul class="lang-switcher">
<li class="lang-switcher__item">
<a class="lang-switcher__link" href="url">en</a>
</li>
<li class="lang-switcher__item">
<a class="lang-switcher__link" href="url">ru</a>
</li>
</ul>
</header>
CSS
/* 块命名规则1:block */
/* header Block */
.header{
...
}
/* 块命名规则2:block-name */
/* search-from Block */
.header .search-form{
...
}
/* 元素命名规则:block-name__element-name */
/* lang-switcher__item Element */
.lang-switcher .lang-switcher__item{
...
}
/* 修饰符命名规则1:block-name__element-name--modifier-status */
/* search-form__input--focus Modifier */
.search-form .search-form__input--focus{
...
}
/* 修饰符命名规则2: block-name__element-name--modifier-name--modifier-value */
/* search-form__button--size--s Modifier */
.search-form__button--size--s{
...
}
二.注释规范
1.单行注释
注释内容第一个字符和最后一个字符都是一个空格字符,单独占一行,行与行之间相隔一行。
推荐
/* Comment Text */
.sd-style{}
/* Comment Text */
.sd-style{}
不推荐
/* Comment Text */
.sd-style{}
.sd-style{}/* Comment Text */
2.模块注释
注释内容第一个字符和最后一个字符都是一个空格字符,/* 与 模块信息描述占一行,多个横线分隔符-与/占一行,行与行之间相隔两行*
推荐
/* Module A
---------------------------------------------------------------- */
.mod_a {}
/* Module B
---------------------------------------------------------------- */
.mod_b {}
不推荐
/* Module A
---------------------------------------------------------------- */
.mod_a {}
/* Module B
---------------------------------------------------------------- */
.mod_b {}
3.文件信息注释
@charset "UTF-8";
/**
* @desc File Info
* @author Author Name
* @date 2015-10-10
*/
三.代码风格
1.代码格式化
样式书写一般有两种:一种是紧凑格式 (Compact)
.sd-style{display: block;width: 50px;}
一种是展开格式(Expanded)
.sd-style{
display: block;
width: 50px;
}
我们约定统一使用展开格式书写样式
2.代码大小写
/* 推荐 */
.jdc{
display:block;
}
/* 不推荐 */
.JDC{
DISPLAY:BLOCK;
}
3.选择器
- 尽量少用通用选择器 *
- 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
/* 推荐 */
.sd-style {}
.sd-style li {}
.sd-style li p{}
/* 不推荐 */
*{}
#sd-style {}
.sd-style div{}
4.属性书写顺序
建议遵循以下顺序:
- 布局定位属性:display / position / float / clear / visibility / overflow
- 自身属性:width / height / margin / padding / border / background
- 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.sd-style {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
5.CSS3浏览器私有前缀写法
CSS3 浏览器私有前缀在前,标准前缀在后
.sd-style {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
前端代码规范-CSS的更多相关文章
- web前端代码规范——css代码规范
Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个 ...
- Web 前端代码规范
Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...
- eslint+prettier+husky+lint-staged 统一前端代码规范
eslint+prettier+husky+lint-staged 统一前端代码规范 遵循编码规范和使用语法检测,可以很好的提高代码的可读性,可维护性,并有效的减少一些编码错误. 1.终极目标 团队中 ...
- Web前端代码规范
新增:http://materliu.github.io/code-guide/#project-naming HTML 原则1.规范 .保证您的代码规范,保证结构表现行为相互分离.2.简洁.保证代码 ...
- idataway_前端代码规范
1.前后端json对接的规范. 前后端的json代码规范 result ={ success:”true”,//true表示成功,false表示失败. data:{}, //数据 errorCode: ...
- 百度前端代码规范:CSS
1.代码风格 1.1 文件 [建议] CSS 文件使用无 BOM 的 UTF-8 编码. 1.2 缩进 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. 1.3 ...
- Web前端代码规范与页面布局
一. 规范目的: 为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化. 二. ...
- web前端代码规范 - HTML代码规范
Bootstrap HTML编码规范 本文转载自w3cschool. 由于bootstrap得到了世界的认可,因此,此规范用于规范html代码有一定的说服力. 交流qq群:164858883.欢迎各位 ...
- 腾讯alloyteam团队前端代码规范
来源于:http://alloyteam.github.io/CodeGuide/ 命名规则 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规 ...
随机推荐
- SQL case when 遇到null值
case when f.FPH is NULL then a.HSJE else f.KPHSJE end yes case f.FPH when NULL then a.HSJE ...
- 如何导出robotframework的工程
不知道是不是只有我一个小白,自己折腾了很久,也百度了很久,不知道怎么导出哇.现在来扫扫盲罗.我拿自己的项目举例:找到我的RF工程目录可以看到下面有3个项目,直接拷贝你想要的项目就ok啦,是不是so e ...
- 【转载】 C#中使用Sum方法对List集合进行求和操作
在C#的List操作中,有时候我们需要对List集合对象的某个属性进行求和操作,此时可以使用Lambda表达式中的Sum方法来快速实现此求和操作,使用Sum方法可使代码简洁易读,并且省去写for循环或 ...
- js循环修改数组属性key值
var keyMap = { deviceUid: "id", deviceType: "typeName", deviceCode: "code&q ...
- MM-发票校验与收货的差异处理
SAP FI-财务发票校验修改金额后没有进入差异科目问题:公司新建物料采购订单,在MM科目自动确定配置完成后,做发票校验时,修改金额没修改数量时,差异进入了原材料科目 换采购订单继续测试时,修改金额没 ...
- 关于Ad-hoc
Ad-hoc是wifi的一个模式,依托普通无线局域网802.11家族.网络中所有结点的地位平等,无需设置任何的中心控制结点,省去了无线中介设备AP.比如一台电脑建立了一个网络,这个时候加入了两台电脑. ...
- JAVA笔记整理(七),JAVA几个关键字
本篇主要总结JAVA中的super.this.final.static.break.continue 1.super super主要用在继承当中,表示调用父类的构造函数. 1.如果要在子类方法中调用父 ...
- Vue框架之基础知识
在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...
- Django之简介
一.MVC模型与MTV模型 MVC模型就是Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起 ...
- 运输层3——传输控制协议TCP概述
目录 1. TCP最主要的特点 2. TCP的连接 3. socket在不同场景中的含义 写在前面:本文章是针对<计算机网络第七版>的学习笔记 运输层1--运输层协议概述 运输层2--用户 ...