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

问题描述

问 题

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

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

解决方案

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

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

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

这篇关于html - css模块化, 如何很好的拆分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！