Coder Social home page Coder Social logo

css-creating's Introduction

CSS 创作指南(Beta)

CSS 是一种领域语言(DSL),层叠与继承赋予了 CSS 优雅多姿的无限创造力。正是由于它如此「简单」, 我们需要一些规范来使其变得更加可依赖。在使用 CSS 的时候不要把它当做一种编程语言,应该把它当做 画画或者创作。所以本文档不仅仅是一份 CSS 书写规范,更像是 CSS 创作的调色盘。

「作为成功的项目的一员,很重要的一点是意识到只为自己写代码是很糟糕的行为。如果将有成千上万人 使用你的代码,那么你需要编写最具明确性的代码,而不是以自我的喜好来彰显自己的智商。」
—— Idan Gazit

目录

  1. 缩进
  2. 注释
  3. 书写格式
  4. 细节美化
  5. 省略
  6. 书写顺序
  7. 选择器
  8. 其他
  9. 预处理工具
  10. 代码组织
  11. 构建部署

许可

1. 缩进

在项目中应该有一个统一的缩进风格,以避免不必要的麻烦,千万不要缩进时空格和制表符(TAB)混用。

  • 推荐缩进使用4个空格。
  • 删除行尾冗余的空格。

提示:通过编辑器的全局设置保持统一的风格

2. 注释

良好的注释使代码更具有可读性和可维护性,尤其是多人协作的项目,不要让团队其他成员来猜测一段 代码的意图。

注释风格应当相对简洁,做如下规范:

  • 区块注释放在单独一行。
  • 保持注释内代码的缩进。
  • 为了注释文字更具有可读性,合理控制每行的字数,推荐每行80个字符(40个汉字)以内。

提示:通过扩展 emmet 等工具可以快速输出统一的注释风格。

CSS 文件中有如下几种注释:

1. 普通注释,注释文字左右各留一个空格。

/* 普通注释 */

2. 区块注释

一级区块

/* ==========================================================================
   一级区块注释
   ========================================================================== */

二级区块

/* --------------------------------------------------------------------------
   二级区块注释
   -------------------------------------------------------------------------- */

3. Doxygen 风格的注释

每个 CSS 文件的头部或区块的开始处应当包含 Doxygen 风格的注释,以阐明该文件或这段代码的 作用、作者、最后更新时间等信息。

Doxygen 风格的注释以 /** 开始,每行以 * 号开头。

/**
 * Doxygen 风格的注释示例
 * @file:    文件信息
 * @author:   一丝
 * @update:   2013-11-5
 * @note:     注解
 * @doc:      相关文档
 *
 * 这里是更详细的描述,当然我们要把字数控制在每行80个字符(40个汉字)以内。如果
 * 一行写不下,需要另起一行。
 */

Doxygen 风格的注释内如果包含其他代码,不写开头的 * 号,以方便复制代码。

 /**
 * Doxygen 风格的注释包含代码
 * 
 * 例如我们可以在注释中嵌入 HTML 代码,同样保持代码的缩进。
 *
    <div class="mod">
        <p>这个模块名叫 mod</p>
    </div>
 */

3. 书写格式

1. 统一使用小写。

包括颜色中的 16 进制写法,字体名称以及 translatex等。

.Foo{
    font-family: 'Helvetica Neue', Tahoma, 'Hiragino Sans GB', sans-serif;
    color: #FFF;
    BACKGROUND: #CCC;
    -webkit-transform: translateX(20px);
}

推荐的写法:

.foo{
    font-family: 'helvetica neue', tahoma, 'hiragino sans gb', sans-serif;
    color: #fff;
    background: #ccc;
    -webkit-transform: translatex(20px);
}

2. 每个声明前保留一级缩进

不推荐的写法:

h3 {
font-weight: bold;
}

推荐的写法:

h3 {
    font-weight: bold;
}

3. 规则集的左大括号前保留一个空格

不推荐的写法:

h3{
    font-weight: bold;
}

推荐的写法:

h3 {
    font-weight: bold;
}

4. 右大括号保持与该规则集第一个字符对齐

不推荐的写法:

h3{
    font-weight: bold;
    }

推荐的写法:

h3 {
    font-weight: bold;
}

5. 属性值前增加个空格

不推荐的写法:

h3 {
    font-weight:bold;
}

推荐的写法:

h3 {
    font-weight: bold;
}

6. 多个选择器和声明都独占一行

不推荐的写法:

h1, h2, h3 {
    font-weight: normal; line-height: 1.5;
}

推荐的写法:

h1,
h2,
h3 {
    font-weight: normal;
    line-height: 1.5;
}

7. 每个规则集之间保留一个空行

不推荐的写法:

.selector1 {
    display: block;
    width: 100px
}
.selector2 {
    padding: 10px;
    margin: 10px auto;
}

推荐的写法:

.selector1 {
    display: block;
    width: 100px
}

.selector2 {
    padding: 10px;
    margin: 10px auto;
}

8. 逗号后面保留一个空格。

.selector {
    color: rgba(0, 0, 0, .5);
    transition: color .3s, width .5s cubic-bezier(0.69, 0, 0.175, 1);
    transform: matrix(0, 1, 1, 1, 10, 10);
}

4. 细节美化

1. 选择器内只有一个声明时可以写在一行。

这样可以使得代码显得更加紧凑。

h1 {font-size:32px;}

h2 {font-size:26px;}

h3 {font-size:22px;}

2. 包含多个前缀的声明以第一个声明中的冒号对齐,较长的前缀写在最前面。

.selector {
    -webkit-transition: .3s ease;
       -moz-transition: .3s ease;
        -ms-transition: .3s ease;
         -o-transition: .3s ease;
            transition: .3s ease;
}

3. 较长的属性值推荐放在多行,属性值开头保持一级缩进。

比如多个 box-shadow 和背景渐变等,这有助于提高代码的可读性,且易于生成有效的 Diff。

.selector {
    box-shadow: 
        1px 1px 5px #000,
        0 0 6px blue,
        2px 0 3px 5px #ccc inset;
    background-image:
        linear-gradient(to top right, green, blue),
        linear-gradient(to right, blue, red);
}

@media
    only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
    only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
    only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
    only screen and (min-resolution: 192dpi), /* 不支持dppx的浏览器 */
    only screen and (min-resolution: 2dppx) /* 标准 */
{
    .selector {

    }
}

@font-face {
    font-family: 'FontName'; /* IE9 */
    src: url('FileName.eot');
    src:
        url('FileName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('FileName.woff') format('woff'), /* Chrome,Firefox */
        url('FileName.ttf') format('truetype'), /* Chrome,Firefox,Opera,Safari,Android, iOS 4.2+ */
        url('FileName.svg#FontName') format('svg'); /* iOS 4.1- */
}

4. @keyframes 内的关键帧保留一级缩进。

@keyframes foo {
    50% {
       -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
           -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
               transform: scale(1.2);
    }
}

5. 省略

  • 如无必要,省略0值单位。
  • 如无必要,省略小数前面的 0。
  • 如无必要,省略 url 中的引号。
  • 省略font-family内中文字体名称的引号。
  • 不强制要求缩写属性,fontbackgroundmargin 等。
  • 不强制要求缩写颜色中的16进制写法。
  • 不建议省略选择器内最后一个声明末尾的分号。
    多人协作时,如果他人新增了其他代码很可能没有注意到上一行末尾没有写分号,导致不必要的麻烦。

不推荐的写法:

.selector {
    display: block;
    width: 100px
}

推荐的写法:

.selector {
    display: block;
    width: 100px;
}

6. 书写顺序

1. 不强制要求声明的书写顺序。

如果团队有需求,建议使用工具来自动化排序,比如 CSScomb
推荐以声明的特性作为分组,不同分组间保留一个空行,例如:

.dialog {
    /* 定位 */
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;    

    /* 盒模型 */
    width: 500px;
    height: 300px;
    padding: 10px 20px;

    /* 皮肤 */
    background: #FFF;
    color: #333;
    border: 1px solid;
    border-radius: 5px;
}

2. 标准的属性写在最后

不推荐的写法:

.foo {
    -webkit-border-radius: 6px;
            border-radius: 6px;
       -moz-border-radius: 6px;
}

推荐的写法:

.foo {
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

7. 选择器

1. 可以使用 * 通用选择器。

  • 通用选择器效率低是一个误区,如有必要可以使用。

例如:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

4. 不要在选择器末尾使用 * 通用选择器。

CSS选择器匹配规则是从右往左,例如:

.mod .foo * {
    border-radius: 6px;
}

8. 其他

  • 如果需要 CSS Hacks,需详细注明解决什么问题。
  • 尽量避免使用 IE 中的 CSS filters。
  • 统一使用双引号「""」,如content: ""
  • 选择器中的属性值也加上双引号,如input[type="checkbox"]
  • font-weight普通字重使用normal,加粗使用bold。大部分字体只有两个字重,所以
    不建议使用容易混淆的数值表示方法。

9. 预处理工具

不同的 CSS 预处理工具有着不同的特性、功能以及语法。编码习惯应当根据使用的预处理工具进行扩展, 以适应其特有的功能。推荐在使用 SCSS 时遵守以下指导。

  • 将嵌套深度限制在1级。对于超过2级的嵌套,给予重新评估。这可以避免出现过于详实的 CSS 选择器。
  • 避免大量的嵌套规则。当可读性受到影响时,将之打断。推荐避免出现多于20行的嵌套规则出现。
  • 始终将@extend语句放在声明块的第一行。
  • 如果可以的话,将@include语句放在声明块的顶部,紧接着@extend语句的位置。
  • 考虑在自定义函数的名字前加上x-或其它形式的前缀。这有助于避免将自己的函数和 CSS 的原生函数混淆,
    或函数命名与库函数冲突。
.selector {
    @extend .other-rule;
    @include clearfix();
    @include box-sizing(border-box);
    width: x-grid-unit(1);
    // 其他声明
}

10. 代码组织

11. 构建部署

1.使用CSS Reset(CSS重置)还是normalize.css?

1.1 什么是CSS Reset

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。 不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下, 它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。 所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。 “覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS Reset。

1.2 为什么使用CSS Reset

为什么需要CSS Reset? 因为浏览器很多,每个浏览器的默认样式也是不同的,比如标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的, 所以,通过重置button标签的默认CSS属性,然后再对它进行统一定义,就可以在各个浏览器下产生相同的显示效果。

1.3 CSS Reset的具体代码

最简单的CSS Reset内容寥寥几行就能完成:

* { padding: 0; margin: 0; border: 0; }

以上代码过于简单粗暴,小朋友请勿模仿! YUI也给了一个很好的CSS Reset,YUI的CSS Reset内容:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

以及国外名人Eric Meyer的CSS Reset V1.0|200802内容:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
} 

Eric Meyer V2.0|20110126

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,
p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,
tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;}body {line-height: 1;
}
ol, ul {list-style: none;
}blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

###2. normalize.css ####2.1 normalize.css什么? normalize.css是一个可定制的CSS文件,使所有浏览器呈现HTML元素更一致和符合现代标准。 详见https://github.com/necolas/normalize.css

###3. 结论 为了显得高端大气,请毫不犹豫的使用normalize.css!

许可

MIT License Copyright (c) 2013 一丝

css-creating's People

Contributors

feilong123 avatar yisibl avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.