首页 > 如何组织整站开发的css?

如何组织整站开发的css?

对于一个网站的开发,应该如何组织css内容及文件?
你常用的组织方式是怎样的?
谢谢!


说说我自己的方法:

个人博客一类的小站点,除去reset.css,一般再有一个style.css足已。

网站比较大的话,将基础部分分成:base.css grid.css components.css ie.css等等,components保存所有组件的CSS,命名方式可以参考BEM,发布的时候压缩一下。

页面比较多的情况可能要分出header.css footer.css sidebar.css等等,总之这个没有严格的规定,根据业务的不同,选择适合维护和扩展的组织方式。还有就是多看看别人的代码。


试试less之类的东西。另外可以去看看bootstrap之类的css是怎么写的


最近刚好在整理这方面的,可以参考下http://www.cnblogs.com/leejersey/p/3506269.html


1.学会总结,命名规范---这样你的小伙伴也很容易读懂
2.学会模块化,通用性强---并不是每个地方都要重新定义css,其实很多地方都可以重复用的
这是网易的,个人觉得很好nec


全局一个公用的global.css即可,省得去引入header和footer的css


敢问这个问题,垦定不是小站,楼主可以参考一下 bootstrap 的方式,我认为挺高大上的


重设、公用(布局、浮动、按钮之类基础模块)、业务模块(头尾、频道、首页)


1.@import模块依赖并打包
2.命名空间规范化
3.组件提取

关于2,3,由于css文件的划分方式很多,引用如下:


Css

Css都用class来命名,主要是方便公用。这里引入命名空间和索引。

命名空间

page类用来设置页面布局,module类具有唯一性,widget是公用的块级元素,图形是公用的行内块或行内元素。

布局(page)

以p为开头的只设置宽度和间距,和模块分离开。

模块(module)

以m开头的在同一个页面内具有唯一性,可以用来控制公用的元素。模块的布局要和部件分离。

部件(widget)

以w开头的说明是公用的元素,部件用”w_功能”来命名,功能可以参考无障碍的role属性。部件的布局要和图形分离。如果要做细微的修改用模块来控制,不会污染到其他地方。


以上划分方式都是为了防止命名空间的污染。

然后再根据需求,把以上文件通过公用级栏目级别以及私用级别的方式划分出来。而每个级别涉及到的css文件通过@import方式依赖导入。再通过打包工具进行打包解析。

若是不用Less或者Sass编译工具,那么就用grunt-contrib-requirejs来做打包工作吧。

参考自:http://www.zhouwenbin.com/%E5%89%8D%E7%AB%AF%E7%9A%84%E5%A4%9A%E9%87%8D%E5%88%86%E7%A6%BB%E8%A7%A3%E8%80%A6/

【热门文章】
【热门文章】