[精通css书摘]规划、组织和维护样式表CSS
把CSS分割为多个样式表是常见的做法,但导入样式表比链接样式表慢,因此推荐仅使用单个文件。
设计代码的结构
使用单个文件时,需要为代码设计良好的结构,根据模块化的思想将整个文档分成几部分:
一般性样式:主体样式;reset样式;链接;标题;其他元素
辅助样式:表单;通知和错误;一致的条目
页面结构:标题、页脚和导航;布局;其他页面结构元素
页面组件:各个页面
覆盖
这里使用一种风格统一的大注释块分隔每个部分。
/* @group general styles ---------------------------------------------------*/ /* @group helper styles ---------------------------------------------------*/ /* @group page structure ---------------------------------------------------*/ /* @group page components ---------------------------------------------------*/ /* @group overrides ---------------------------------------------------*/
开发人员需要自行判断如何分成相对明确清晰的块,代码的分隔可以更好的编辑文件,方便查找和完善,甚至可以根据分块重用自己的代码,何乐而不为呢?
自我提示
对于复杂的大项目,可以添加临时的注释提醒自己一些必要的事项,例如启动前需要完成的工作,或者一些属性的查询表。
例如需要使用的颜色十六进制表、列宽度等等,工作进程或者遇到的问题等等,都可以用相应的注释提醒自己,最好使用合适的关键字作为注释的开始,例如@todo之类的。
删除注释和优化样式表
注释增加了样式表文件的大小,可以通过删除注释来减小文件,同时压缩空格也是减小文件大小的方式,可以采用gzip来实现,压缩后的文件一般以.min.css结尾,表明是压缩后的文件,保存源文件以供修改和改进。
样式指南
对于复杂的系统,可以采用样式指南的方式提供css的帮助和提示,以供后来的工作人员和使用客户阅读。
以上为小指整理摘自精通CSS一书,欢迎转载。
点赞2
支持一下