《编写高质量代码--Web前端开发修炼之道》（读书笔记）

①页面布局的过程中，遇到可能在每个栏目都会变化的地方的时候，需要考虑好html以及css以及js代码的可重用性，尽量实现自适应，保持弹性，高度模块化。为未来可能存在的“变化”做好准备。
公共组建在开发之初就要考虑到被多人重复使用的，一般修改会造成很大影响！所以我们要对其稳定性保持高度警惕，不允许轻易修改。要修改也要考虑好给全局带来的影响。
例如导航栏的设计，思考如何提高其复用性，重用性，自适应能力，等等。
#wrap #header #footer #sidebar #nav #menu #search_bar #content #main div#position div#page h1h2h3 p table

②前端技术就是要一专多能，既要精一行，也要通十行。通就是有些只需要知道就可以了，以便你可以理解整个流程，而并不需要都精通，当然，如果能精通后端服务器语言，那也有利于你理解更为复杂的问题。平时应该多关注一些前端开发工程师应该关注的知识领域，利用好搜索引擎里面的新闻搜索功能。
（图）

③css模块化技巧：

一，划分方法：模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将他们提取出来，拆分成一个独立的模块。
二、划分原则：模块应在保证数量尽可能少的同时，做到尽可能简单，以提高重用性。一个结构和功能太复杂的模块不如几个各施其职的小类组合起来更加灵活。

④css推荐的命名方式：（page层css）
驼峰和下划线公用的方式，用驼峰以区分不同单词，下划线则代表从属关系。加前缀以尽量显示其为私有属性，以免引起合作者和不同维护者之间的命名冲突。
如：muneProduct_lastItem, py_(开发者名字为前缀)

⑤多用组合，少用继承。
将各模块有公共的部分组成组件，把容易变化的css属性分拆出去，例如只是字号和颜色或者margin-top padding-top等等一两个属性不一致时，分出特殊类.f12, .f14, .f16, .red, .mg10, .mt20, pt20, 等等。
小结：
如果不确定模块的上下margin的稳定性，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用编剧的原子类（例如：mt10、mt20）。
而且为了避免上下margin重合的出现，统一使用margin-top或者margin-bottom，不要混用margin-top和margin-bottom。

 

用心思考的更多，你就会收获的更多（待续....）