好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

[精通css书摘]规划、组织和维护样式表CSS

把CSS分割为多个样式表是常见的做法,但导入样式表比链接样式表慢,因此推荐仅使用单个文件。

设计代码的结构

使用单个文件时,需要为代码设计良好的结构,根据模块化的思想将整个文档分成几部分:

  1. 一般性样式:主体样式;reset样式;链接;标题;其他元素

  2. 辅助样式:表单;通知和错误;一致的条目

  3. 页面结构:标题、页脚和导航;布局;其他页面结构元素

  4. 页面组件:各个页面

  5. 覆盖
    这里使用一种风格统一的大注释块分隔每个部分。

/* @group general styles
---------------------------------------------------*/

/* @group helper styles
---------------------------------------------------*/

/* @group page structure
---------------------------------------------------*/

/* @group page components
---------------------------------------------------*/

/* @group overrides
---------------------------------------------------*/

开发人员需要自行判断如何分成相对明确清晰的块,代码的分隔可以更好的编辑文件,方便查找和完善,甚至可以根据分块重用自己的代码,何乐而不为呢?

自我提示

对于复杂的大项目,可以添加临时的注释提醒自己一些必要的事项,例如启动前需要完成的工作,或者一些属性的查询表。

例如需要使用的颜色十六进制表、列宽度等等,工作进程或者遇到的问题等等,都可以用相应的注释提醒自己,最好使用合适的关键字作为注释的开始,例如@todo之类的。

删除注释和优化样式表

注释增加了样式表文件的大小,可以通过删除注释来减小文件,同时压缩空格也是减小文件大小的方式,可以采用gzip来实现,压缩后的文件一般以.min.css结尾,表明是压缩后的文件,保存源文件以供修改和改进。

样式指南

对于复杂的系统,可以采用样式指南的方式提供css的帮助和提示,以供后来的工作人员和使用客户阅读。


以上为小指整理摘自精通CSS一书,欢迎转载。

点赞2
 标签: css 组织css
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸