3.CSS开发规范

半夏_2021

已于 2022-04-30 07:50:22 修改

阅读量364

点赞数

分类专栏：前端规范文章标签： css规范

于 2022-04-30 07:45:07 首次发布

本文链接：https://blog.csdn.net/fd2025/article/details/124507915

版权

前端规范专栏收录该内容

8 篇文章 2 订阅

订阅专栏

1 编码规范

字符集

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写
考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。

推荐：

@charset "UTF-8";

.jdc{}

不推荐：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";

.jdc{}
@CHARSET "UTF-8";
/* @charset规则没有用小写 */

.jdc{}
/* 无@charset规则 */
.jdc{}

样式命名

class、id都需小写
命名使用英文，禁止使用特殊字符
样式名不能包含ad、guanggao、ads、gg是广告含义的关键词，避免元素被网页拓展、插件屏蔽
名称间隔使用-符号
涉及数据、交互等需要联调的部分，禁止通过id选择器定义样式，以免开发过程中id名变化，引起页局错乱

类名命名需要语义化，参考下面的示例：

 .wrap{}                 //外层容器
 .mod-box{}              //模块容器
 .btn-start{}            //开始
 .btn-download-ios{}     //ios下载
 .btn-download-andriod{} //安卓下载
 .btn-head-nav1{}        //头部导航链接1
 .btn-news-more{}        //更多新闻
 .btn-play{}             //播放视频
 .btn-ico{}              //按钮ico
 .btn-lottery{}          //开始抽奖
 .side-nav{}             //侧栏导航
 .side-nav-btn1{}        //侧栏导航-链接1 
 .btn-more{}             //更多

尽量使用缩写属性

不推荐：

border-top-style: none; 
font-family: palatino, georgia, serif; 
font-size: 100%; line-height: 1.6; 
padding-bottom: 2em; 
padding-left: 1em;
 padding-right: 1em; 
 padding-top: 0;

推荐：

border-top: 0; 
font: 100%/1.6 palatino, georgia, serif; 
padding: 0 1em 2em;

每个选择器及属性独占一行

代码格式化

样式书写一般有两种：一种是紧凑格式 (Compact)

.jdc{ display: block;width: 50px;}

一种是展开格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

团队约定

统一使用展开格式书写样式

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */
.jdc{
	display:block;
}
	
/* 不推荐 */
.JDC{
	DISPLAY:BLOCK;
}

选择器

尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */
*{}
#jdc {}
.jdc div{}

代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.jdc {
    width: 100%;
    height: 100%;
}

分号

每个属性声明末尾都要加分号；

.jdc {
    width: 100%;
    height: 100%;
}

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

推荐：

.jdc { 
    width: 100%; 
}

不推荐：

.jdc{ 
    width:100%;
}

逗号分隔的取值，逗号之后一个空格

推荐：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推荐：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个css选择器或新申明开启新行

推荐：

.jdc, 
.jdc-logo, 
.jdc-hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推荐：

.jdc,jdc-logo,.jdc-hd {
    color: #ff0;
}.nav{
    color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

推荐：

.jdc {
    color: rgba(255,255,255,.5);
}

不推荐：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

属性值十六进制数值能用简写的尽量用简写

推荐：

.jdc {
    color: #fff;
}

不推荐：

.jdc {
    color: #ffffff;
}

不要为 0 指明单位

推荐：

.jdc {
    margin: 0 10px;
}

不推荐：

.jdc {
    margin: 0px 10px;
}

属性值引用

css属性值需要用到引号时，统一使用单引号

/* 推荐 */
.jdc { 
	font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.jdc { 
	font-family: "Hiragino Sans GB";
}

属性值书写顺序

建议遵循以下顺序：

布局定位属性：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 …

.jdc {
    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;
}

CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

2 注释规范

单行注释

注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

推荐：

/* Comment Text */
.jdc{}

/* Comment Text */
.jdc{}

不推荐：

/*Comment Text*/
.jdc{
	display: block;
}
.jdc{
	display: block;/*Comment Text*/
}

模块注释

注释内容第一个字符和最后一个字符都是一个空格字符，/* 与模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行

推荐：

/* Module A
---------------------------------------------------------------- */
.mod-a {}


/* Module B
---------------------------------------------------------------- */
.mod-b {}

不推荐：

/* Module A ---------------------------------------------------- */
.mod-a {}
/* Module B ---------------------------------------------------- */
.mod-b {}

文件信息注释

在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */

3 SASS规范

SASS注释规范

SASS支持 CSS 标准的多行注释 /* */，同时也支持单行注释 //。

多行注释在使用非 Compressed 模式进行编译后的输出文件中会保留下来，单行注释 // 侧会被移除
多行注释和单行注释在 SASS 编译后输出的压缩 CSS 文件都会被移除
当多行注释内容第一个字符是感叹号 “!” 的时候，即 /*! */，SASS 无论用哪一种编译方式编译注释都会保留
注释内容可以加入 SASS 变量

团队约定

SCSS 文件内

全部遵循 CSS 注释规范
不使用 /*! */ 注释方式
注释内不放 SASS 变量

标准的注释规范如下：

@charset "UTF-8";

/**
 * @desc File Info
 * @author liqinuo
 * @date 2015-10-10
 */

/* Module A
----------------------------------------------------------------*/
.mod-a {}

/* module A logo */
.mod-a-logo {}

/* module A nav */
.mod-a-nav {}


/* Module B
----------------------------------------------------------------*/
.mod-b {}

/* module B logo */
.mod-b-logo {}

/* module B nav */
.mod-b-nav {}

嵌套规范

选择器嵌套

/* CSS */
.jdc {}
body .jdc {}

/* SCSS */
.jdc {
    body & {}
}
/* CSS */
.jdc {}
.jdc-cover {}
.jdc-info {}
.jdc-info-name {}

/* SCSS */
.jdc {
    &-cover {}
    &-info {
        &-name {}
    }
}

属性嵌套

/* CSS */
.jdc {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(/img/icon.png);
    background-position: 0 0;
}

/* SCSS */
.jdc {
    background: {
        color: red;
        repeat: no-repeat;
        image: url(/img/icon.png);
        position: 0 0;
    }
}

变量

可复用属性尽量抽离为页面变量，易于统一维护

// CSS
.jdc {
    color: red;
    border-color: red;
}

// SCSS
$color: red;
.jdc {
    color: $color;
    border-color: $color;
}

混合(mixin)

根据功能定义模块，然后在需要使用的地方通过 @include 调用，避免编码时重复输入代码段

// CSS
.jdc-1 {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.jdc-2 {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

// SCSS
@mixin radius($radius:5px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.jdc-1 {
    @include radius; //参数使用默认值
}
.jdc-2 {
    @include radius(10px);
}



// CSS
.jdc-1 {
    background: url(/img/icon.png) no-repeat -10px 0;
}
.jdc-2 {
    background: url(/img/icon.png) no-repeat -20px 0;
}

// SCSS
@mixin icon($x:0, $y:0) {
    background: url(/img/icon.png) no-repeat $x, $y;
}
.jdc-1 {
    @include icon(-10px, 0);
}
.jdc-2 {
    @include icon(-20px, 0);
}

占位选择器 %

如果不调用则不会有任何多余的 css 文件，占位选择器以 % 标识定义，通过 @extend 调用

//scss
%borderbox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jdc {
    @extend %borderbox;
}

extend 继承

// CSS
.jdc-1 {
    font-size: 12px;
    color: red;
}
.jdc-2 {
    font-size: 12px;
    color: red;
    font-weight: bold;
}

// SCSS
.jdc-1 {
    font-size: 12px;
    color: red;
}
.jdc-2 {
    @extend .jdc-1;
    font-weight: bold;
}

// 或者
%font-red {
    font-size: 12px;
    color: red;
}
.jdc-1 {
    @extend %font-red;
}
.jdc-2 {
    @extend %font-red;
    font-weight: bold;
}

for 循环

// CSS
.jdc-1 {background-position: 0 -20px;}
.jdc-2 {background-position: 0 -40px;}
.jdc-3 {background-position: 0 -60px;}

// SCSS
@for $i from 1 through 3 {
    .jdc-#{$i} {
        background-position: 0 (-20px) * $i;
    }
}

注意：#{} 是连接符，变量连接使用时需要依赖

each 循环

// CSS
.jdc-list {
    background-image: url(/img/jdc-list.png);
}
.jdc-detail {
    background-image: url(/img/jdc-detail.png);
}

// SCSS
@each $name in list, detail {
    .jdc-#{$name} {
        background-image: url(/img/jdc-#{$name}.png);
    }
}


// CSS
.jdc-list {
    background-image: url(/img/jdc-list.png);
    background-color: red;
}
.jdc-detail {
    background-image: url(/img/jdc-detail.png);
    background-color: blue;
}

// SCSS
@each $name, $color in (list, red), (detail, blue) {
    .jdc-#{$name} {
        background-image: url(/img/jdc-#{$name}.png);
        background-color: $color;
    }
}

function 函数

@function pxToRem($px) {
    @return $px / 10px * 1rem;
}
.jdc {
    font-size: pxToRem(12px);
}

运算规范

运算符之间空出一个空格

.jdc {
    width: 100px - 50px;
    height: 30px / 5;
}

注意运算单位，单位同时参与运算，所以 10px 不等于 10，乘除运算时需要特别注意

// 正确的运算格式
.jdc {
    width: 100px - 50px;
    width: 100px + 50px;
    width: 100px * 2;
    width: 100px / 2;
}

3 LESS规范

代码组织

将公共 less 文件放置在 style/less/common 文件夹

例: // color.less,common.less

2) 按以下顺序组织

1、@import;

2、变量声明;

3、样式声明;

@import "mixins/size.less"; 
@default-text-color: #333; 
.page {
 width: 960px; 
 margin: 0 auto; 
}

1.4.2 避免嵌套层级过多

不推荐：

 .main {
   .title { 
      .name { 
           color: #fff;  
         } 
     }
}

推荐：

.main-title {
   .name { color: #fff; }
 }

5 重置样式

html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
ul, ol { list-style: none; }
img { border: 0 none; vertical-align: top; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, em, i { font-style: normal; font-weight: normal; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
mark { background: none; }
input::-ms-clear { display: none !important; }
body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }