『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS

Posted 2020-06-24 改变自己，从点滴做起

1、怪异模式和DTD

标准模式：浏览器根据规范表现页面

怪异模式：模拟老浏览器行为防止老站点无法工作（为了兼容老式浏览器的代码），如果漏写DTD（Document Type Definition文档定义类型）声明，firefox会按照标准模式来解析网页，但在IE中就会触发怪异模式。

两种模式的差异比较大，比较典型的是IE对盒模型的解析；在标准模式中，网页元素的宽度是由padding、border、width三者的宽度相加决定的，而在怪异模式中，width本身就包括了padding和border的宽度

 

2、如何组织CSS？

按功能划分：font.css color.css layout.css 等

按区块划分：head.css foot.css sidebar.css main.css等

作者建议:base.css + common.css +page.css

base层提供CSS reset功能（覆盖浏览器默认样式）和通用原子类（文字、定位、长宽、边距）,具有高度可移植性

common层是网站级的，不同的网站有不同的common层，同一个网站只有一个common层；网站中高度重要的模块，称之为组件

page层位于最高层，提供页面级的样式

 

3、模块化CSS