css

CSS书写规范

开始就形成良好的书写规范，是你专业化的开始。

空格规范

【强制】选择器与 { 之间必须包含空格。

示例： .selector { }

【强制】属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。

示例：

font-size: 12px;

选择器规范

【强制】当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建议】选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

属性规范

【强制】属性定义必须另起一行。

示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】属性定义后必须以分号结尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

最普通的，最为常用的结构

两列左窄右宽型

比如小米小米官网

通栏平均分布型

比如锤子锤子官网

sublime快捷方式

sublime可以快速提高我们代码的书写方式

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成
如果想要生成多个相同标签加上 就可以了比如 div3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了

css

css