【规范】前端编码规范——css 规范
2017-02-02 20:27
549 查看
编码
在 css 首行设置文件编码为 UTF-8。@charset "UTF-8";
class 命名
class 名称应当尽可能短,并且意义明确。使用有意义的名称,使用有组织的或目的明确的名称,不要使用表现形式的名称。不推荐
fw-800 {font-weight:800;} .red {color:red;}
推荐
.heavy {font-weight:800;} .important {color:red;}
使用中划线(-)分隔 class 中的单词。虽然它很不方便的让你双击选择,但是它可以增强理解性。另外属性选择器
[attribute|=value]也能识别中划线(-),所以最好坚持使用中划线作为分隔符。
不推荐
.slide_hd {} .slide_bd {}
推荐
.slide-hd {} .slide-bd {}
基于最近的父 class 或基本 class 作为新 class 的前缀。
不推荐
.header .logo {} .header .banner {}
推荐
.header-logo {} .header-banner {}
使用
.js-*的 class 来标识行为(与样式相对),并且不要将这些 class 写有任何的样式。
减少选择器的嵌套
在写选择器时,要尽可能的减少嵌套层级,一般 2~3 层,不要超过 4 层。不推荐
.main ul li a span {}
推荐
.main span {}
优化选择器
当构建选择器时应该使用清晰,准确和有语义的 class 名。尽量减少使用标签选择器。如果你只关心你的 class 名,而不是你的代码元素,这样会更容易维护。不推荐
div.content > header.content-header > h2.title { font-size: 2em; }
推荐
.content > .content-header > .title { font-size: 2em; }
属性简写
css 提供了各种简写属性(font、
background等等),使用简写属性对于代码效率和可读性是有很有用的。
不推荐
border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2px; padding-left: 1px; padding-right: 1px; padding-top: 0;
推荐
border-top: none; font: 100%/1.6 palatino, georgia, serif; padding: 0 1px 2px;
但是不能滥用简写形式,过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作用。
不推荐
width:100px; margin:0 auto;
推荐
width:100px; margin-right:auto; margin-left:auto;
省略 0 后面的单位
不要在 0 值后面使用单位。不推荐
padding-bottom: 0px; margin: 0em;
推荐
padding-bottom: 0; margin: 0;
使用 16 进制表示颜色值
css 中的颜色值可以使用 16 进制来表示,在可能的情况下,可以进行缩写,比如:#fff、
#000。
hack 的使用
虽然 hacks 能够很方便的解决浏览器之间的兼容问题,但是我们还是不要使用 hacks,尽量从根本上解决问题,比如改变结构等等。声明顺序
为了保证更好的可读性,我们应该遵循以下顺序:定位:
position|
z-index|
top|
right|
bottom|
left|
clip
布局:
display|
float|
clear|
visibility|
overflow|
overflow-x|
overflow-y
尺寸:
width|
min-width|
max-width|
height|
min-height|
max-height
外边距:
margin|
margin-top|
margin-right|
margin-bottom|
margin-left
内边距:
padding|
padding-top|
padding-right|
padding-bottom|
padding-left
边框:
border|
border-top|
border-right|
border-bottom|
border-left|
border-radius|
box-shadow|
border-image
背景:
background|
background-color|
background-image|
background-repeat|
background-attachment|
background-position|
background-origin|
background-clip|
background-size
颜色:
color|
opacity
字体:
font|
font-style|
font-variant|
font-weight|
font-size|
font-family
文本:
text-transform|
white-space|
word-break|
word-wrap|
overflow-wrap|
text-align|
word-spacing|
letter-spacing|
text-indent|
vertical-align|
line-height
文本修饰:
text-decoration|
text-shadow
书写模式:
direction|
unicode-bidi|
writing-mode
列表:
list-style|
list-style-image|
list-style-position|
list-style-type
表格:
table-layout|
border-collapse|
border-spacing|
caption-side|
empty-cells
内容:
content|
counter-increment|
counter-reset|
quotes
用户界面:
appearance|
text-overflow|
outline|
outline-width|
outline-color|
outline-style|
outline-offset|
cursor|
zoom|
box-sizing|
resize|
user-select
多列:
columns|
column-width|
column-count|
column-gap|
column-rule|
column-rule-width|
column-rule-style|
column-rule-color|
column-span|
column-fill|
column-break-before|
column-break-after|
column-break-inside
伸缩盒:
flex
变换,过渡,动画:
transform|
transition|
animation
媒体查询的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。推荐
.element {} .element-avatar {} .element-selected {} @media (min-width: 480px) { .element {} .element-avatar {} .element-selected {} }
带前缀的属性
当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。.selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
引号
属性选择器或属性值用双引号(""),而不是单引号(
'')括起来。url 的值不要使用引号。
不推荐
import url('//cdn.com/foundation.css'); input[type='submit'] { font-family: 'open sans', arial, sans-serif; } body:after { content: 'pause'; }
推荐
@import url(//cdn.com/foundation.css); input[type="submit"] { font-family: "open sans", arial, sans-serif; } body:after { content: "pause"; }
声明结束
为了保证一致性和可扩展性,每个声明应该用分号结束。不推荐
.demo { width:100px; height:100px }
推荐
.demo { width:100px; height:100px; }
多行规则声明
为了易读性和便于快速编辑,统一将语句分为多行,即使该样式只包含一条声明。不推荐
.demo {width:100px;height:100px;}
推荐
.demo { width:100px; height:100px; }
中文字体引用
css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用\5B8B\4F53来表示。具体参考下表:
中文 | 英文名 | unicode |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
对于 sass 的嵌套
在 sass 中你可以嵌套选择器,这可以使代码变得更清洁和可读。嵌套所有的选择器,但尽量避免嵌套没有任何内容的选择器。如果你需要指定一些子元素的样式属性,而父元素将不什么样式属性,可以使用常规的 css 选择器链,这将防止您的脚本看起来过于复杂。
不推荐
.content { display: block; } .content > .news-article > .title { font-size: 1.2em; }
推荐
.content { display: block; > .news-article > .title { font-size: 1.2em; } }
当使用 sass 的嵌套功能的时候,重要的是有一个明确的嵌套顺序。
当前选择器的
@extend和
@include
当前选择器的样式属性
父级选择器的伪类选择器(
:first-letter,
:hover,
:active等等)
伪类元素(
:before和
:after)
父级选择器的声明样式(
.selected,
.active等等)
用 sass 的上下文媒体查询
子选择器作为最后的部分
.test { @extend %clearfix; color:#ccc; &:hover { color:#000; } &:before { border:1px solid #eee; content:""; } &.active { color:#f00; &:hover { color:#ff0; } } @media screen and (max-width: 640px) { display:block; font-size:2em; } > .title { font-size:1.2em; } }
参考文献
Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / Sass coding stylehttp://www.css88.com/archives/5505
相关文章推荐
- 【规范】前端编码规范——css 规范
- 前端编码规范之CSS
- 前端编码规范之CSS
- 前端编码规范之CSS
- 前端读者 | 百度前端编码规范(CSS)
- html css 前端 编码规范
- 前端编码规范之CSS
- HTML+CSS基础+web前端编码规范
- 前端编码规范之CSS(转)
- 前端开发编码规范之CSS
- 人人网FED CSS编码前端开发规范
- 【规范】前端编码规范——javascript 规范
- 常用html、CSS、javascript前端命名规范
- CSS编码规范 百度
- 网易邮箱前端技术分享之javascript编码规范(二)类规范
- 前端 HTML-CSS 规范
- [转]前端HTML-CSS规范
- web前端代码规范——css代码规范
- CSS编码规范
- 由一段代码谈前端js优化和编码规范(一)