《前端开发修炼之道》学习感悟

将网页的结构、样式和行为分离开来是w3c推行的web标准。
为了编写高质量代码，这三者的实现又要遵循一定的规范。
一、html结构——尽量使用语义化标签。
    早期的网页布局采用大量的table来实现，常常导致网页代码量大，结构混乱。内容都在table，tr，td标签中，从中看不到页面真正需要的语义。现代css布局，弱化了标签“布局”能力，将“布局”完全放到样式中进行控制，标签重新恢复了原来的作用。css布局代码量少，架构精简，语义明确，这对搜索引擎是非常友好的。
    css很强大，所以可以用完全不同的html代码制作出视觉上相同的页面，然而如果没有按照语义选择标签，仅仅考虑最终视觉效果，其实又走上了table布局的老路。使用合适的标签，可以是减少对css的工作量，使得页面结构简洁。
    判断网页标签语义是否良好的简单方法就是：去掉样式，看网页结构是否依然组织有序，有很好的可读性。IE下可以使用F12调试工具来禁用css，检测网页语义是否良好，FF和chrome需要安装相应的插件，来实现禁用css的功能。
二、高质量css——良好的组织方式。
    页面中元素的样式，都是经过计算后得出的最终结果，计算的对象包括属性的组合和继承。对于多个class的组合，后定义（或者说后载入）的样式会将之前的样式覆盖掉，对于继承，子元素声明的样式也会将从父元素继承下来的样式覆盖掉。所以，使用好组合和继承会大大缩短css的编写量，这就要求在开发设计过程中，要纵观全局，不能只看到一处。在编写css时，要多用组合，少出现继承，因为修改继承的属性意味着重复代码，这不管从代码编写还是浏览器计算上，都是吃力不讨好的。
    所以为了做好组合的工作，可以将css进行分层。底层负责最基本，最原子而且最常用到的属性，每个页面都引入它。中间层做好承上启下的工作，利用底层开发出一些通用组件。顶层负责对应各个不同的页面进行更细致的配置。
三、高质量javascript
    同css同样的原理，对js进行良好的组织也是提高效率和质量的手段。比如底层提供跨浏览器的，方便调用的dom操作方法（就像很多js库正在做的那样），中间层利用这些方法写出通用组件，顶层对应各个页面需求，进行个性化开发。