JUI 包含了一组样式,用于基本的网页布局、元素显示和组件显示。

样式组织方式

关于样式的组织方式,有两大门派,一派是原子类方式,一派是语义类方式。

原子类介绍可参考文章: Challenging CSS Best Practices

语义类介绍可参考文章: http://maintainablecss.com/

浅析 Bootstrap 的 CSS 类名设计

知乎上对原子类的批判

语义类

通过界面元素实际代表的意义来命名,并编写样式的类。

                            
                        

原子类

原子化 CSS(Atomic CSS),是 Yahoo 提出来的一种独特的 CSS 代码组织方式,应用在 Yahoo 首页和其他产品中。ACSS 的独特性在于它的理念与一般开发人员的理解有很大的不同,并挑战了传统意义上编写 CSS 的最佳实践,也就是关注点分离原则。ACSS 认为关注点分离原则会导致冗余、繁琐和难以维护的 CSS 代码。 ACSS 的原则是把 CSS 样式打散成尽可能小的部分,每个 CSS 类只对应一条样式规则,从而达到最大化的可复用性。比如 CSS 类 M(10px)所对应的样式规则是 margin: 10px。在应用 CSS 样式时,只需要在把所需要的原子化 CSS 类名添加到 DOM 元素上即可。

一个原子类一般只包含一种或一类样式属性,所以也叫属性类,而一种属性大多代表视觉表现上某种呈现,所以,一个原子类也就描述了视觉上的某个方面

                            
                        

哪里使用

  • 可以用来快速构建原型界面。比使用语义类更快(不需要定义新的样式类,不需要给样式类取名字),比不使用样式类更好看(原子类自带定义良好的样式)。在将原型转化为产品时可以通过less或sass等css预处理器把原子类样式组合重构到语义类。
  • 因为一个原子类一般对应一个视觉方面,所以也可以通过定义良好的原子类来学习,熟悉css样式的知识。
  • 在局部,对通用语义类进行特殊化调整的时候。
  • 用于语义类的非通用部分进行定制的时候。

综合使用原则

  • 以语义类为主,原子类为辅
  • 通用结构用语义类
  • 通用结构里的非通用元素的样式定制用原子类
  • 通用结构的通用元素的样式定制使用模块修饰符
  • 布局和颜色原子类组合语义类一起使用。

应用上述原则之后的一个模块结构有可能类似这样