Alvansea

1. "cmBtn cmLarge"看起来更简单，但不便于维护。举个例子，假如使用了“cmLabel cmLarge”，同时希望对label的实际显示效果做微调，或者针对某浏览器做fix，那对cmLarge的修改就可能会影响到button的显示结果，这样每次修改都要针对所有可能的element做回归测试，增加了不必要的工作量。 2. 回答关于微博上讨论的有了btn-lg是否还需要btn的问题。btn定义了按钮的基本形态，比如圆角形状，float模式等等，在没有btn-lg的时候可以正常显示。如果需要用jQuery动态调整按钮大小，只要用$(...).addClass('btn-lg')就行了，同样removeClass('btn-lg'), toggleClass('btn-lg')也都可以正常使用。 但是如果框架允许btn-lg在没有btn的情况下也能正常工作，前段工程师就有可能只写一个btn-lg，这个时候调用removeClass，button就丢失了所有style。所以在这种约定下，js端在removeClass以后还要不可避免的附加一个addClass('btn')，以保证button的正常显示。最终结果虽然是减少了class内的字符，却大大增加了js端的代码，得不偿失。

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

看完楼上牛人的长篇回复，我想到一个问题：为什么饭店不卖菜刀？ CSS作为一种前端语言区别于其他语言的最大特点有三： 1、前端是可视的，所以视觉元素与语言之间的关系务必要简单直接，尽可能避免一切不必要的抽象、继承、计算。 例子：如果有多个元素都是9px字体，那就直接用“font-size: 9px;”，而不是抽象出一个变量，因为设计师很可能会随机修改其中某一个或者几个的值 2、前端是频繁变化的，而且频率远超其他layer，所以不同元素之间的逻辑关系不再那么有意义，而易读性与易维护性则尤为重要。 例子： 如果某按钮高亮时用不一样的color，那就指定color的绝对值，而不要用类似 @light-blue: @nice-blue + #111; 这种方式来描述，因为设计师看不懂，无法在photoshop中调出这个色彩。 3、前端的工作需要工程师与设计师紧密地协同工作，所以语言的学习曲线务必简单快捷。太复杂的逻辑设计师没空研究，术业有专攻，就像多数web工程师也未必能分清高斯模糊和镜头虚化的差别。 回到最初的那个问题，bootstrap就是饭店，less就是菜刀，css就是烧好的菜。