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的更多相关文章

  1. web前端代码规范——css代码规范

    Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个 ...

  2. Web 前端代码规范

    Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...

  3. eslint+prettier+husky+lint-staged 统一前端代码规范

    eslint+prettier+husky+lint-staged 统一前端代码规范 遵循编码规范和使用语法检测,可以很好的提高代码的可读性,可维护性,并有效的减少一些编码错误. 1.终极目标 团队中 ...

  4. Web前端代码规范

    新增:http://materliu.github.io/code-guide/#project-naming HTML 原则1.规范 .保证您的代码规范,保证结构表现行为相互分离.2.简洁.保证代码 ...

  5. idataway_前端代码规范

    1.前后端json对接的规范. 前后端的json代码规范 result ={ success:”true”,//true表示成功,false表示失败. data:{}, //数据 errorCode: ...

  6. 百度前端代码规范:CSS

    1.代码风格 1.1 文件 [建议] CSS 文件使用无 BOM 的 UTF-8 编码. 1.2 缩进 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. 1.3 ...

  7. Web前端代码规范与页面布局

    一.    规范目的: 为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化.   二.     ...

  8. web前端代码规范 - HTML代码规范

    Bootstrap HTML编码规范 本文转载自w3cschool. 由于bootstrap得到了世界的认可,因此,此规范用于规范html代码有一定的说服力. 交流qq群:164858883.欢迎各位 ...

  9. 腾讯alloyteam团队前端代码规范

    来源于:http://alloyteam.github.io/CodeGuide/ 命名规则 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规 ...

随机推荐

  1. 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 ...

  2. 如何导出robotframework的工程

    不知道是不是只有我一个小白,自己折腾了很久,也百度了很久,不知道怎么导出哇.现在来扫扫盲罗.我拿自己的项目举例:找到我的RF工程目录可以看到下面有3个项目,直接拷贝你想要的项目就ok啦,是不是so e ...

  3. 【转载】 C#中使用Sum方法对List集合进行求和操作

    在C#的List操作中,有时候我们需要对List集合对象的某个属性进行求和操作,此时可以使用Lambda表达式中的Sum方法来快速实现此求和操作,使用Sum方法可使代码简洁易读,并且省去写for循环或 ...

  4. js循环修改数组属性key值

    var keyMap = { deviceUid: "id", deviceType: "typeName", deviceCode: "code&q ...

  5. MM-发票校验与收货的差异处理

    SAP FI-财务发票校验修改金额后没有进入差异科目问题:公司新建物料采购订单,在MM科目自动确定配置完成后,做发票校验时,修改金额没修改数量时,差异进入了原材料科目 换采购订单继续测试时,修改金额没 ...

  6. 关于Ad-hoc

    Ad-hoc是wifi的一个模式,依托普通无线局域网802.11家族.网络中所有结点的地位平等,无需设置任何的中心控制结点,省去了无线中介设备AP.比如一台电脑建立了一个网络,这个时候加入了两台电脑. ...

  7. JAVA笔记整理(七),JAVA几个关键字

    本篇主要总结JAVA中的super.this.final.static.break.continue 1.super super主要用在继承当中,表示调用父类的构造函数. 1.如果要在子类方法中调用父 ...

  8. Vue框架之基础知识

    在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...

  9. Django之简介

    一.MVC模型与MTV模型 MVC模型就是Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起 ...

  10. 运输层3——传输控制协议TCP概述

    目录 1. TCP最主要的特点 2. TCP的连接 3. socket在不同场景中的含义 写在前面:本文章是针对<计算机网络第七版>的学习笔记 运输层1--运输层协议概述 运输层2--用户 ...