css模块化, 如何很好的拆分

Question

基本样式：base.css
框架布局：layout.css
模块样式：module.css
全局样式：global.css

分成这么多css是方便以后网站的改版吗？我总是不知道怎么样很好的去拆分各模块样式。
像module.css，到底怎么样的算是一个模块然后放在里面。
很困扰，求解答！

Answer 1

我觉得拆的过碎没啥必要，也会延长加载时间，还不如去写SCSS。

我自己写，一般一个页面会link三个css：第一个是reset.css，里边放的是网站里所有HTML元素的默认基础样式（这个网上其实有下载的）和全局样式（比如font）；第二个是common.css，里边会放点比如页脚这种各个页面都会带的组件，以及部分页面里结构相似可以抽象的一些东西（但是这里一定要注意类的命名，因为各个页面都link的话就会有潜在的命名污染的风险，必要的时候可以试试BEM之类的方案）；最后就是页面css了。

至于拆分模块，一是视觉上类似，二是结构上类似，建议你在写之前可以先在纸上画个原型图，看看有哪些组件是比较“像”的，如果有相似的结构和属性，就可以抽象出来单独写~

Answer 2

同意熊猫的看法。

补充一点，如果你是要做大型的系统，比如微信，要保证良好的维护性和拓展性，还是要拆分的。
比如：

base:
    mixin
    variable
    ...
icon:
    ...
font:
    ...    
widget:
    loading
    flex
    ...

就拿微信来说，weui 的设计理念中，有一条是 场景化，现在微信是一个生态，良好的拓展性是很有必要的。

如果是小型项目的话，也可以简单的做一下拆分，具体分成多大的粒度，就要看你们去权衡了。

补充一点： 需要搭配预编译使用 比如less/scss/postCss.