不能写得一手好字是一个遗憾。不能写得一手好看的代码更是一种遗憾。——致青春

1. 为选择器分组时,将单独的选择器单独放在一行.

2. 为了代码的易读性,在每个声明块的左花括号前添加一个空格.

3. 声明块的右花括号应当单独成行.

4. 每条声明语句的 : 后应该插入一个空格.

5. 所有声明语句都应当以分号结尾并且应该独占一行.

6. 避免为 0 值指定单位.

7. 为选择器中的属性添加双引号,例如,input[type="text"].

8. 尽量使用简写形式的十六进制值并且十六进制值应该全部小写.

9. 不要使用@import、!important

10. 当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑

11. 对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。对于带有多条声明的样式,还是应当将声明分为多行

12. 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3层

13. class 名称中只能出现小写字符和破折号,不是下划线,也不是驼峰命名法

14. 代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称

15. 以组件为单位组织代码块

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... } /* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
/*
* Component section heading
*
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/

CSS 规范的更多相关文章

  1. Scoped CSS规范草案

    原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS 写在前面 问:什么是Scoped CSS规范? Scoped CSS规范是We ...

  2. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  3. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  4. 瞬间从IT屌丝变大神——CSS规范

    CSS规范主要包括以下内容: CSS Reset用YUI的CSS Reset. CSS采用CSSReset+common.css+app.css的形式. app.css采用分工制,一个前端工程师负责一 ...

  5. [转]前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core  通用 ...

  6. 新手不得不注意HTML CSS 规范

    作为一名新进的程序菜鸟,根本不知道从哪里开始学起好,前辈都说HTML CSS 规范是一个十分需要注意的点,要我记下,特地转来保存一下,大家相互学习 //总论 本规范既然一个开发规范,也是一个脚本语言参 ...

  7. 前端CSS规范大全

    一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用 ...

  8. Web前端开发中的各种CSS规范

    Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...

  9. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  10. CSS规范 - 分类方法

    CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...

随机推荐

  1. bzoj 1142 [POI2009]Tab 最小表示

    [POI2009]Tab Time Limit: 40 Sec  Memory Limit: 162 MBSubmit: 373  Solved: 167[Submit][Status][Discus ...

  2. 字符串模式匹配算法--BF和KMP详解

    1,问题描述 字符串模式匹配:串的模式匹配 ,是求第一个字符串(模式串:str2)在第二个字符串(主串:str1)中的起始位置. 注意区分: 子串:要求连续   (如:abc 是abcdef的子串) ...

  3. HDU2688 树状数组(逆序数)

    Rotate Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  4. Java的位运算符—与(&)、非(~)、或(|)、异或(^)

    位运算符主要针对二进制,它包括了:“与”.“非”.“或”.“异或”.从表面上看似乎有点像逻辑运算符,但逻辑运算符是针对两个关系运算符来进行逻辑运算,而位运算符主要针对两个二进制数的位进行逻辑运算.下面 ...

  5. [LeetCode] Sort Colors 对于元素取值有限的数组,只遍历一遍的排序方法

    Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...

  6. canvas知识03:学写一个字案例

    效果

  7. jquery动画切换引擎插件 Velocity.js 学习01

    一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

  8. [Luogu 3958] NOIP2017 D2T1 奶酪

    题目链接 人生第一篇题解,多多关照吧. 注意事项: 1.多组数据,每次要先初始化. 2.因为涉及到开根,所以记得开double. 整体思路: 建图,判断「起点」与「终点」是否连通. 方法可选择搜索(我 ...

  9. centos7.2编译安装zabbix-3.0.4

    安装zabbix-3.0.4 #安装必备的包 yum -y install gcc* make php php-gd php-mysql php-bcmath php-mbstring php-xml ...

  10. MyBatis 系列五 之 延迟加载、一级缓存、二级缓存设置

    MyBatis的延迟加载.一级缓存.二级缓存设置 首先我们必须分清延迟加载的适用对象 延迟加载 MyBatis中的延迟加载,也称为懒加载,是指在进行关联查询时,按照设置延迟加载规则推迟对关联对象的se ...