团队CSS规范

版本号 作者 时间 版本 内容摘要
v1.0 eleven 2018-05-16 1.0.0 文档初始化

CSS规范

1. 样式表编码

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

2. 代码格式化

  • 样式书写一般有两种:一种是紧凑格式 (Compact);统一使用展开格式书写样式
  • 统一使用四个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)
  • 每个属性声明末尾都要加分号;

推荐

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

不推荐

    .fs{ display: block;width: 50px;}
    .nav{ 
      display: block;
      width: 50px;
    }
    .head{ 
      display: block;
      width: 50px
    }

3. 选择器

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

推荐

.fs {}
.fs li {}
.fs li p{}

不推荐

*{}
#fs {}
.fs div{}

4. 代码易读性

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

推荐

.fs { 
    width: 100%; 
}

不推荐

.fs{ 
    width:100%;
}

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

推荐

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

不推荐

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

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

推荐

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

不推荐

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

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

推荐

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

不推荐

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

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

推荐

.fs {
    color: #fff;
}

不推荐

.fs {
    color: #ffffff;
}

不要为 0 指明单位

推荐

.fs {
    margin: 0 10px;
}

不推荐

.fs {
    margin: 0px 10px;
}

5. 属性书写顺序

WechatIMG4112.jpeg
/* css声明顺序案例 */
.test{
        z-index: 1;
        position: absolute;
        float: right;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        
        overflow: hidden;
        display: block;
        width: 100px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        border:1px solid #f5f5f5;
        border-radius: 3px;
        box-sizing: border-box;
        
        line-height: 1.5;
        text-align: center;
        background: #fff url(test.jpg) center no-repeat; // 推荐简写
        background-position:'center';
        background-image:url(test.jpg);
        background-color: #fff;
        background-size: 30px 30px;
        background-repeat:'no-repeat';
        color: #fff;
        opacity: 1;
        font: normal 13px 'Helvetica Neue',sans-serif;
        vertical-align: center;
        white-space: nowrap;
        word-break: break-all;
        cursor: pointer;
        
        /* 其他css3新增属性 */
        transform:roate(45deg);
        transition: all .2s;
        box-shadow: 0 0 0 rgba(0,0,0,.5);
        text-shadow: 0 0 0 rgba(0,0,0,.5);
    }

6.CSS3浏览器私有前缀写法

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

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

7.单行注释

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

推荐

/* Comment Text */
.fs{}
/* Comment Text */
.fs{}

不推荐

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

8.模块注释

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

推荐

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

不推荐

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

9.文件信息注释

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

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

10.移动端重置样式

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline;box-sizing:border-box; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; fon-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

11.PC端重置样式

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; }

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 87,517评论 13 122
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 1,888评论 0 3
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 2,427评论 2 37
  • 开赛两连败,随后各位球迷奉献了一波十六连胜,其中不防包括勇士、马刺、雷霆这样的西部豪强队伍。布朗,塔特姆两位...
    囡甡阅读 50评论 0 0
  • 陌上青杨飘絮花, 疏林几树熟枇杷。 熏风挟夏驱春去, 静体蒙絺步晚霞。
    文泉野老阅读 45评论 0 0