前端项目应该如何规划css结构便于重构和维护？

Question

项目前期是不支持移动端的适应，只支持PC和pad；后期会添加对移动端的支持，那么前期应该【如何规划好项目的CSS样式，便于维护】？另外：页面数量少于10个，有必要做一套符合自己项目的【bootstrap】一样的UI样式吗？或是根据PSD设计图从上到下一个一个写，能复用的就复用？我现在是这样做的：写一个公共样式（重置、全局样式、布局、字体样式、表单、按钮，颜色）+某页面特殊样式.css感觉改起来很乱，因为有些不知道应该放在什么位置上。

Answer 1

CSS编译器应该是你需要的。
在Node项目中我喜欢用stylus。
在Rails项目中我喜欢用sass。
其它项目里我喜欢用less。
关于如何组织维护，确实看看bootstrap学习学习甚好，但在实际项目中，可能要根据自己的业务需求稍作调整吧。比如我其中的一个项目，代码如下：
@import"compass";
@import"compass/reset";
@import"config";
@import"global";
@import"header";
@import"footer";
//components
@import"components/type";
@import"components/form";
@import"components/btn";
@import"components/icon";
@import"components/table";
//modules
@import"modules/agree";
@import"modules/bank";
@import"modules/dialog";
@import"modules/divider";
@import"modules/diyselect";
@import"modules/hint";
@import"modules/jump";
@import"modules/protocal";
@import"modules/step";
@import"modules/subject";
@import"modules/tab";
@import"modules/text";
@import"modules/tipbox";
@import"modules/tiptext";
@import"modules/typelist";
@import"modules/title";
@import"modules/video";
//pages
@import"pages/account";
@import"pages/audit";
@import"pages/collect";
@import"pages/depository";
@import"pages/error";
@import"pages/faq";
@import"pages/mobile";
@import"pages/profile";
@import"pages/password";
项目地址