前言前端模块化是一个很大的话题。我们可以简单的分为html模块化、javascript模块化、css模块化；但必不可少。希望通过理解css的模块化，能够一窥模块化的含义和思想。大纲当项目复杂一点的时候，css的写法在项目迭代的时候会很痛苦。css的模块化可以让项目中的样式更加优雅，易于管理。本文只分析CSS模块化的思路和技巧，构建工具和动态样式语言本身都是必不可少的，限于篇幅这里不再赘述。这些示例使用sass作为参考。痛点对于迭代周期长的复杂项目，甚至是变更频繁的小项目（你懂的），风格维护是前端难以言说的痛点。大致可以归结为以下几类选择器：繁琐、冗长、命名冲突、层次结构不清晰。代码难复用...解决这些问题的核心思想在于代码复用。在不使用或不使用动态样式语言构建项目时，经常可以看到大家会抽取通用样式，如common.css、form.css、fxckpm.css等。但单纯依靠css静态文件结构重组只能稍微缓解以上症状。使用通用的样式，而每个公共样式对于不同的页面来说可能过于冗余，可能会漏掉很多东西，那么最终的项目还是经不起时间的摧残，慢慢来吧。曙光得益于构建工具和动态样式语言，使得css的模块化易于操作。颠覆一切的武器：@import，面向对象编码，变量，函数，继承等等。这里要提的是，css本身很早就支持@import，但是在生产环境中直接写在css中，这对性能有影响，浏览器的性能不一致。具体问题请问度娘姑夫人。开始用了这么多，下面我们从代码和项目结构的角度来一步步分析一下如何模块化。我这里的根目录是scss，下面贴出一个简单的模块化目录结构。PS：scss文件前的下划线_表示该文件不需要生成对应的css文件。@importing时，文件名中的下划线可以忽略，直接引用│style.scss│_main.scss│├─base//底层文件目录，组件的基本属性，最小组件单元的仓库││_reset.scss│││├─mixin//定义@mixin││_border-radius.scss││_clearfix.scss││_flex.scss││_gradients.scss││_set-arrow.scss││_set-onepx.scss││_text-overflow.scss│││└─variable//元素的基本变量│_color.scss│_global.scss│_size.scss│└─widget//组件由页面元素基于最小的部分组成_agree.scss_animation.scss_btn.scss_effect.scss_form.scss解析代码复用仍然是我们的核心目的。清晰易维护，以达到所谓的模块化上面介绍了文件夹的结构，接下来我们分析一下各个目录结构代表什么。我们从组件目录widget开始分析统一的组件。这里的文件都是我们需要的页面元素组件，包括_btn.scss（页面按钮）、_form.scss（表单元素）、_animation.scss（页面动画）等。以widget文件夹下的_btn.scss为例，里面有可调用的class、id、animation等，可以直接使用，也可以生成后继承。谁来定义这些组件的高度？该示例位于基本文件夹中。基本属性和属性相关的东西都在base文件夹下。以mixin文件夹下的_border-radius.scss为例，以variable文件夹下的_color.scss为例。这些文件定义了元素的基本属性，如颜色、大小、边框等，只是定义了元素的属性，不能直接使用。这里需要注意的是，元素属性通常分为两类：variable是简单的变量定义如$red:#ff0000；而mixin包含了更复杂的属性，比如border，需要根据多个参数来定义这个属性。按需引用widget中的组件只是定义了一个可复用的统一元素样式，对于页面的实际使用还是需要补充和细化的。上面的_main.scss就是作用。最后我们将页面需要的组件，加上对应页面UI补充完善的_main.scss完成打包。style.scss@charset"utf-8";@import"./base/reset";@import"./widget/animation";@import"./widget/btn";@import"./widget/form";@import"./widget/agree";@import"./widget/effect";@import"main";style.scss文件即使我们需要生成最终文件，最终文件和补充文件也可能是多个，本文仅以一个需要引用的页面为例，所以最后只有一个_main.scss和style.scss，实际情况下可能不够用。深入技巧简单介绍一下CSS模块化的实现。加强相关能力需要多看、多想、多做。当你拿到设计图的时候，你需要多思考，不要只是拿起键盘就去做。看看目前开源的UI库的源码，比如bootstrap、foundation、material等，看看他们是如何组织相关文件的。注意命名也很重要，篇幅有限就不展开了。请参考：编码规范：http://codeguide.bootcss.com/，网易NEC：http://nec.netease.com/本文中的项目结构不具有代表性，需要根据实际进行更多定制针对不同项目的情况模块化结构，便于维护。小结如果你的项目中有十个或更多的页面，页面元素的样式相同或相似，那么你可以用模块化的思路写一个自定义的UI库。以后如果这个项目页面的样式主题发生变化，那么你可以选择敲打产品经理，让他撤回需求，或者只需要增加新的组件，修改一些变量，就可以优雅地完成迭代工作。欢迎洽谈，欢迎焦作人！
