前端规范-CSS

看W3Cschool中腾讯alloyteam团队前端代码规范的笔记

一、CSS代码规范

假设有一个类名叫jdc

1、编码规范

样式文件的第一行首个字符位置开始写@charset 规则
@charset "UTF-8";

2、代码风格

①代码格式化

a、书写格式为展开格式，每个属性占一行

②代码大小写

a、样式选择器，属性名，属性值关键字全部使用小写字母

③选择器的使用

a、尽量少/不使用的选择器：通用选择器*，ID选择器#，无具体语义定以的标签选择器div

④代码缩进

a、统一使用四个空格进行缩进，如果使用的编辑器按tab不是四个空格，可以再编辑器里设置

⑤分号

a、每个属性值末尾结束的时候加分号

⑥代码易读性

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

.jdc { 
    width: 100%; 
}

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

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

c、多个选择器同一样式时，单个选择器开启新行，例：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}

d、css的（）里面不要有空格，如果是0.x，不写0，例：

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

e、属性值十六进制数值能用简写的尽量用简写，#000000和#000最好写后者。

f、不要给0单位，例：

.jdc {
    margin: 0 10px;
}

⑦属性值引号

a、属性值统一使用单引号

⑧属性值书写顺序

建议遵循以下顺序：

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

⑨CSS3浏览器私有前缀写法

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

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

二、CSS注释规范

注释内容第一个字符和最后一个字符都是一个空格字符
/* Comment Text */

1、单行注释

单独占一行，注释上面空一行

/* Comment Text */
.jdc{}
​
/* Comment Text */
.jdc{}

2、模块注释

/*与 模块信息描述占一行，多个横线分隔符-与*/占一行，注释上面空2行

/* Module A
---------------------------------------------------------------- */
.mod_a {}
​
​
/* Module B
---------------------------------------------------------------- */
.mod_b {}

3、文件信息注释（作者时间等）

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

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

三、CSS SASS规范

因为我还没用到，所以就不做笔记了，想看的可以点击这个链接

四、CSS重置样式

1、移动端

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
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; font-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; }

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

五、CSS 媒体查询

1、常用查询语句

①横竖屏

/* 横屏 */
@media all and (orientation :landscape) {
​
} 
​
/* 竖屏 */
@media all and (orientation :portrait) {
​
}

②宽高

/* 设备宽度大于 320px 小于 640px */
@media all and (min-width:320px) and (max-width:640px) {
    
}

③像素比

/* 设备像素比为 1 */
@media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) {
    
}
​
/* 设备像素比为 1.5 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    
}
​
/* 设备像素比为 2 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    
}

2、常用设备设置

因为不常用，所以暂不做笔记，有需要的话可以点击这个链接
里面有iPhones、Galaxy Phones、HTC Phones、iPads的媒体查询设置

六、CSS 移动端常用私有属性（带前缀的）

同样的，链接
有兴趣的可以看一看，挺有意思的，关于滚动条基本每一块都可以控制，很详细，还有一些阻止手机默认事件的，限制块元素文本行数的，加滤镜的等等
但是后面大部分属性都是不兼容所有的，所以还是慎用吧