前端项目应该如何规划css结构便于重构和维护？
项目前期是不支持移动端的适应，只支持PC和pad；
后期会添加对移动端的支持，
那么前期应该【如何规划好项目的CSS样式，便于维护】？
另外：
页面数量少于10个，有必要做一套符合自己项目的【bootstrap】一样的UI样式吗？
或是 根据PSD设计图从上到下一个一个写，能复用的就复用？
我现在是这样做的：
写一个公共样式（重置、全局样式、布局、字体样式、表单、按钮，颜色）+ 某页面特殊样式.css
感觉改起来很乱，因为有些不知道应该放在什么位置上。
写回答
-
我也在开发中遇到这个问题，下面是我的想法，仅供参考
首先，我觉得规划css的有个影响因素，就是网站的设计思路，如果网站是有一个整个的设计风格的话，规划的时候可以将模块的粒度适度放大。
结构拆分
基础框架：包含重置样式、栅格、css3动画模块，还是可以加上矢量图标库（iconfont）、辅助类
通用样式库： 基本的复用模块，如button、form、table等，这个设计的时候要注意复用性和维护性
业务样式：包含网站各页面之间的网站特有的样式，如导航、列表页、评论等
解决方案： 可以归纳一下常用的css问题，如兼容多浏览器的高度不固定的垂直水平居中、png透明图片支持等。。
代码规范
命名空间+模块化+语义命名，可以参考Amaze UI HTML/CSS 规范
兼容性列表：这个视业务需求而定了，如果逼格高一点，如ie8+基本和hack说再见了
javascript组件：复杂的交互组件都是和javascript配合，建议公司内部有统一的规范，如果没有，可以参考业内的bootstrap、aralejs都可以
开发工具
现在通过预处理器开发样式很常见了吧，如果是node，就用stylus或者less，像est的样式工具库应该可以帮你提高效率哈文档
文档不多说了，对于团队的维护性不言而喻，推荐一个专门用于css自动化文档工具 -- Hologram，不过依赖于ruby业界参考
Semantic UI
顾名思义，语义化的css库，组件的划分我觉得可以参考一下哈Amaze UI
中国首个开源 HTML5 跨屏前端框架，采用less编写,移动优先，文档很详细,建议仔细阅读，收获不少bootstrap什么的就不用说了
2019-07-17 19:16:09赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
