Css规范
CSS是一个前端的基本功，但是每个人写代码的习惯不同，这不利于团队协作开发，所以一套自己认可，他人认可的CSS规范是必不可少的。希望对大家能有所帮助
大家可以根据自己的习惯进行微调，但大方向不应该改变。
1.缩进
✅使用四个空格来代替制表符 (tab) 缩进。
.element {
position: absolute;
top: 10px;
left: 10px;
border-radius: 10px;
width: 50px;
height: 50px;
}
2.分号
✅每个属性声明末尾都要加分号。「.sass」文件除外。
.element {
width: 20px;
height: 20px;
background-color: red;
}
3.空格
🚨以下几种情况不需要空格：
- ✅属性名后
!important「!」后
/* bad */
.element {
color :red! important;
}
/* good */
.element {
color: red !important;
}
- 多个规则的分隔符「,」前
/* bad */
.element ,
.dialog{
...
}
/* good */
.element,
.dialog {
...
}
- 属性值中「(」后和「)」前
/* bad */
@media screen and ( max-width: 300px ){
body {
background-color:lightblue;
}
}
/* good */
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
- 行末不要有多余的空格
🚨以下几种情况需要空格：
- ✅每条声明语句的「:」后
- ✅选择器「>」、「+」、「~」前后
- ✅在每个声明块的左花括号前，「{」前
- !important「!」前
- 属性值中的「,」后
- 注释「*」后和「*/」前
4.换行
🚨以下几种情况不需要换行：
- 「 { 」前
🚨以下几种情况需要换行：
- 「 { 」后和「 } 」前
- 每个属性独占一行
- 多个规则的分隔符「 , 」后
/* bad */
.selector, .selector-secondary, .selector[type=text]{
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* good */
.selector,
.selector-secondary,
.selector[type="text"] {
margin-bottom: 15px;
padding: 15px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
5.引号
🚨✅最外层统一使用双引号；
🚨url的内容要用引号；
🚨属性选择器中的属性值需要引号。
.element:after {
content: "";
background-image: url("logo.png");
}
li[data-type="single"] {
...
}
6.命名
🚨按照 BEM 的规则命名(注意命名规则也不是唯一的，可自行根据团队选择)
.template-card{
...
}
.template-card__image{
...
}
.template-card__image—active{
...
}
7.颜色
🚨✅颜色16进制用小写字母；
🚨✅颜色16进制尽量用全写；
/* bad */
.element {
color: #ABCDEF;
background-color: #001122;
}
/* good */
.element {
color: #abcdef;
background-color: #012;
}
8.属性简写
📌在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。
常被滥用的简写属性如下：
- padding
- margin
- font
- background
- border
- border-radius
大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的标题元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以了。0 值表示对浏览器默认值或以前指定的值的覆盖。
过度的使用属性简写会导致代码出现不必要的覆盖和意外的副作用。
PS：简写属性也会对性能或多或少的有些影响
/* bad */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* good */
.element {
margin-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: red;
background-image: url("image.jpg");
}
9.属性声明顺序
📌✅相关的属性声明按顺序做分组处理，组之间需要有一个空行。
这是推荐的属性的顺序
总结如下：
- Display & Flow
- Positioning
- Dimensions
- Margins, Padding, Borders, Outline
- Typographic Styles
- Backgrounds
- Opacity, Cursors, Generated Content
.declaration-order {
display: block;
float: right;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
border: 1px solid #e5e5e5;
border-radius: 3px;
width: 100px;
height: 100px;
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
color: #333;
background-color: #f5f5f5;
opacity: 1;
}
10.带前缀的属性
📌✅当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
.element {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background: -moz-linear-gradient(top, #fff 0, #eee 100%);
background: linear-gradient(top, #fff 0, #eee 100%);
}
11.清除浮动
📌 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
.clearfix {
/**
* IE < 8
* Include this rule to trigger hasLayout and contain floats.
*/
zoom: 1;
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
>:before,
>:after {
content: " "; /* 1 */
display: table; /* 2 */
}
>:after {
clear: both;
}
}
12.Less 和 Sass 中的嵌套
📌避免不必要的嵌套。
这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。
/* bad */
.table > thead > tr > th {
...
}
.table > thead > tr > td {
...
}
/* bad */
.table > thead > tr {
> th {
...
}
> td {
...
}
}
/* best use bem */
.table {
> >__item {
...
}
}
13.注释
💡请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。
对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。
/* bad */
/* Modal header */
.modal-header {
...
}
/* good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
18
