组织代码
可维护性
-
开发新功能、修复BUG、提升功能，所有操作都会因为代码可维护性低而变得复杂。因为维护性差导致开发人员一点代码也不敢改，因为改了一点代码就会出问题。
-
CSS是随着代码量增加而最难保持可维护性的语言之一。大多编程语言都有内置的变量、函数和命名空间，但CSS没有。样式表随着CSS代码多起来会变得难以控制。
HTML简史
-
HTML是一种简单的标记语言，为文本赋予了几本的结构和意义，比如标题，列表，定义等等。
-
CSS初衷是把跟HTML混在一起的表现性标记提取出来，使其自成体系，达到结构和表现分离的目的。
关注点分离
-
separation of concerns，是软件行业的一个常见概念。对于WEB开发而言，关注点分离不仅仅适用于标记和样式分离，同样适用于编写样式的方式。
-
关注点分离思想：small pieces，loosely joined。分成小块，松散结合。其中每一个小块都是一个模块，专注做好一件事。比如，在web开发中，这个小块可以是一个商品列表组件，如果能做到松散结合，就可以在一个网站的多个页面中重用。
HTML和CSS的版本
-
CSS1在1996年成为推荐标准。CSS2在1998年成为推荐标准。
-
CSS3采用了完全不同的模式。实际上不存在单纯的CSS3规范，因为CSS3采用的是一系列级别独立的模块。比如CSS Grid Layout Level 1,这是表示Grid布局处于1级别。
-
HTML4.01在1999年成为推荐标准，XHTML1.1因为语法太繁琐严格被抛弃。2009年，WHATWG和W3C(Web Hypertext Application Technology Working Group)共同开发HTML5。
使用哪一个版本
-
规范反映的是标准和WEB技术开发的进度和焦点，但其实跟开发者日常工作关系不大。重要的是要知道HTML和CSS的哪些部分已经在浏览器中实现了，这些实现是否稳健和有没有BUG。
-
了解浏览器支持情况有个好网站：Can I Use。
渐进增强
-
progressive enhancement，渐进增强的思想：首先为最小公分母准备可用的内容，然后再为支持新特性的浏览器添加更多交互优化。
-
使用渐进增强策略，意味着代码需要分层，每一层增强代码都只会在相应特性被支持时应用。
-
CSS中的渐进增强：浏览器在不识别新特性的时候会丢弃该声明，那么在使用新特性时，提供合理的后备声明，使用新属性也不会有带来不良后果。
#example {
background-color: #000;
background-color: rgba(0, 0, 0, .8);
}
- 厂商前缀：浏览器厂商为自家浏览器实验性特性。这样做目的是让他们自己的浏览器能识别该特性，而其他浏览器则会忽略该特性。有以下前缀：
-webkit-, -moz-, -ms-。但为了竞争，浏览器厂商也支持了其他引擎的前缀，这样容易造成混乱，如今浏览器厂商已经抛弃了前缀。
创建结构化、语义化富HTML
- 语义指的就是某个符号本身所表示的含义。语义化标记则意味着在正确的地方使用正确的元素。
ID和class属性
-
除了元素本身，还需要一种方式把样式接入到文档上，这就是ID和class属性。
-
两个属性不一定都能给文档增加含义和结构，他们只是一种让其他因素来操作和解析文档的通用手短。
-
给元素添加类名时，即使类名明确用于样式，也不要体现它的视觉效果，正确做法是让类名表示组件的类型而非视觉。
-
使用class来表示特定模块，使用ID来标识特定模块的特定实例
-
因为ID在页面中只能出现一次，不建议把ID属性作为CSS的接入点。
结构化元素
-
sectionheaderfooter avarticleasidemain -
使用结构化元素和类名结合起来添加样式
<article class='post'>
...
</article>
div和span
- 纯粹出于添加样式的目的而在文档中添加一个div或者span。
- 额外的无语义div或span元素对保证代码清晰和可维护性非常重要。
扩展HTML语义
- 给HTML有限的标签添加新的语义和结构的方式：ARIA(accessible rich internet application)的role属性，微数据、微格式。
验证HTML和CSS
- W3C验证器，和web developer扩展