最近在学web前端的时候,听前辈们推荐的一本书,叫《编写高质量代码-Web前端开发修炼之道》,搜索下载下来看了一下,很不错,其中提出的一些针对性意见很值得学习,所以零度现在推荐给大家。
各位看一下这本书的前四章简介就会发现它真的是一本很不错的参考书,值得买过来收藏。
<<编写高质量代码-Web前端开发修炼之道>>前四章简介:
第一章:从网站重构说起,写高质量代码
所谓高质量的代码,在web标准的思想指导下,在实现结构、样式和行为分离的基础上,还要做到三点:
a、重用:有利于精简,加快开发速度
b、有序:更加清晰的组织代码,易于维护
c、精简:代码小,有利于下载
web标准是一套理论性的指导思想,它的最终目的是让代码更易于维护,标准本身是手段,而不是目的。
第二章:团队合作需要注意的问题
1、前端的知识面需要更宽更广,才能做到更加的专,更加的精。
2、增加代码可读性,注释不可少。
3、前期构思很重要。
4、制订团队规范。
5、团队合作最大难度不是技术,而是人。
第三章:高质量的HTML
1、强调标签语义化。
2、页面标签语义化:结构更加清晰明朗
3、模块标签语义化:当页面内标签无法满足设计需求时,才会适当添加 div 和 span 等无语义标签来辅助实现。
要注意的一些问题:
a、尽可能少的使用无语义标签 div 和 span
b、在语义不明显,既可以用 p 也可以用 div 的地方,尽量用 p,因为 p 默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利。
c、不要使用纯样式标签,eg:b,font,u等,改用css设置。
第四章:高质量的CSS
1、选用标准的 DTD(Document Type Definition 文档类型定义)。
2、组织CSS:base.css(通用类,原子类)+common.css(组件级)+page.css(页面级)
3、模块化CSS,拆分模块技巧:
a、模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块
b、模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性
4、关于CSS的命名:
a、推荐英文命名 例:header container footer
b、使用驼峰命名法或者分隔命名法,或者二者结合 eg:timeList timeList-first ...(驼峰区别单词,中划线表示从属) || time-list time-list-first (中划线单词分隔)
c、命名冲突(多人协作会出现):命名带上特殊标记,比如作者名字拼音简写 eg:hcm-timeList hcm-timeList-first .. (会造成名字长的状况,但是方便于代码维护,有利于团队协作,单人或者肯定不会重名的前提下,可以不加标记)