闭门造车不可取。去看看别人的组件怎么写的。
面对初学者，我一般推荐bootstrap库，这个库的css写的非常出色，仔细看看它的结构是如何组织的。

webpack css module?

我们都怀念那种简单直接的方式，无奈前段工程化大潮势不可挡，概念越来越多，代码越来越臃肿，目录结构越来越复杂。webpack部署个前端环境麻烦死，md,架个服务器也不过如此。

这样等于多了一次不必要的渲染....

这是你自己想当然以为的吧，你以为浏览器就这么傻吗？

它难道不会计算好最终样式再进行渲染吗？

你可以去看看一些预处理的工具和语言。SASS、LESS、你就能理解了。

1、不要自己写组件。除非你这个页面是写着玩的或者给新手普及用的。现在圈里那么多的组件和框架，尽管拿来用。
2、然后你就会发现只需要覆盖样式就可以了。
3、“多了几次渲染”这种纠结的思想只应该出现在重构上，而不是第一次构建上。你下笔之前先思索几天什么都不干，你信不信项目经理砍死你。当然没人规定你工期的话你随便。所以不要有洁癖。
4、读了你全文，感觉就是由洁癖无误了。放开手脚写吧。当然必要的文件夹架构和组件拆分是需要研究一番的，一旦一个项目确定了这些就不要变，就算要改进也是到下一个项目里改。否则你一年也搞不出个项目。

只限于大项目，小项目整太多文件，很烦的。

大项目由于业务繁多，页面更是无计其数，样式文件的模块化，组件化也是为了方便管理。通过文件名就可以定位到相应要修改的地方。

便于项目管理的同时，也减少了协同开发之间引起的冲突，因为每个人只是负责对应项目的单一文件。

谢邀~~

哈哈 都是在坑里滚的 来回全身都是泥吖~~~

css 刚开始写的时候 我也是 直接上 该到什么写什么 也不会考虑题主说的可复用性、扩展性、命名的规范、目录结构组织 这样写下来 一个项目下来 css简直庞大

慢慢的 发现很多问题还是要考虑的

后来开始想到 优化图片 考虑到css命名的规范 考虑到有些重复的样式抽出来 考虑到复用

后来开始用less、sass编写css 用css module 处理css 也用了gulp压缩打包

可算是慢慢地在了解 也在一直优化css样式

坑还很大 得慢慢填

先做暂时能想到的，慢慢优化呗

如果你会用预编译工具的话，建议你看一下weui的源码。