CSS魔法

我猜测三个字母的来源含义： - `C` - core - `A` - advanced - `X` - unknown

@Alvansea 谢谢留言。先讨论你的第一个观点。 > ……那对 cmLarge 的修改就可能会影响到 button 的显示结果…… 其实不会。因为样式可能是这样写的（CMUI 确实也就是这么做的）： ``` css .cmBtn { /* 按钮的默认样式 */ } .cmBtn.cmLarge { /* 大按钮的特殊样式 */ } .cmLabel { /* 标签的默认样式 */ }...

为便于记录讨论过程，我先引用一下我们的讨论所涉及的原微博： > @cssmagic： 我不喜欢 Bootstrap 的前缀式类名风格的主要原因在于，要描述一个大按钮，不仅要有 `.btn-lg` 类，还不能少了 `.btn` 这个基础类。可是 `.btn-lg` 这个类名看起来已经有 “btn” 字样了啊。 以及我的某个评论： > > @soulteary： 私以为 Bootstrap 的这个设计偏重 css rule 的复用，而不是单纯的命名维护，`.box`, `.box-info`, `.box-alert`, 继承关系一目了然…… > > @cssmagic：...

> 还有一点忘了说，如果用到全文替换，比如把某几个文件中所有 btn-lg 替换成 btn-sm 就很方便。但是如果用 cmLarge 就需要排除非 button 的情况，虽然可以把 'cmBtn cmLarge' 替换成 'cmBtn cmSmall'，但是如果其中还有类似 'cmBtn cmRed cmLarge' 的情况呢？基本上就需要排查了。 > > 其他类似场景，比如要为某个文件/页面中的所有 large button 增加其他 style 或者 class，用 btn-lg 也比...

@hax 谢谢大师兄分享。你的参与让这个话题圆满了，哈哈。

不过 Bootstrap 作为一个独立的 UI 项目，还是以 CSS 代码作为最终交付物的。因为并不是所有的项目都会采用 Less 或 Sass 这样的 CSS 预处理器。 而且似乎 Bootstrap 官方并没有建议用户使用（在自己的项目中重用）它内部的 mixin，这些 mixin 只被它视为自己的内部实现。也就是说，Bootstrap 源码中的 mixin 并不是公开的 API，它在样式上的公开 API 只有这些预定义的类名。 即使 Bootstrap 有机会向用户提供更酷的 CSS 抽象和重用方式，但它最终还是采用了老土的...

转发转载记录： - [微博] 伯乐在线官方微博： //weibo.com/1670481425/B3k8fssdV - 伯乐在线： //blog.jobbole.com/67276/

> 就一点，组件与组件之间不能共享样式，为的是更好的解耦嘛 @zhengjunwei 话是没错。不过在现实当中还是有诸多矛盾。 解耦的代价就是难免会有冗余。而程序员在面对冗余时又很难抵挡住抽象的诱惑……加上原生 CSS 的抽象机制就只有 “共用 class” 这一种方法了，于是文章开头提到的跨组件的 “状态类” 就出现了。因此，在解耦和重用之间，程序员一直在纠结地权衡。 值得庆幸的是，如今 CSS 预处理技术已经相当成熟了。因此现代 CSS 项目几乎都是基于 CSS 预处理器打造的，在代码组织上和接口输出上都变得更加灵活和自由。在接口层面解耦、在实现层面重用，可以很自然地实现。甚至，用 mixin 取代类名作为接口，就更不存在类名命名的问题了——我期待这一天的到来。 抽取跨组件的 “状态类” 的另一个目的是为了减少 CSS 代码的体积。这是另一个层面的解耦和重用的矛盾。不过好在 CSS 预处理技术又一次拯救了我们，当我们用 mixin 取代类名作为接口之后，CSS...

@zhengjunwei 你好，与当前主题不相关的问题可以到 [知乎](http://www.zhihu.com/people/cssmagic) 或 [微博](http://weibo.com/cssmagic) 提问，谢谢 :blush:

@Catouse 粗略看了一遍 MZUI 的接口。你的选择就是文中提到的 “链式类名” 方案，它的优缺在原文和评论中已经说得比较清楚了。你能在 MZUI 中完整地实践这种方案，是相当不错的。