JUI 包含了一组样式,用于基本的网页布局、元素显示和组件显示。
关于样式的组织方式,有两大门派,一派是原子类方式,一派是语义类方式。
原子类介绍可参考文章: Challenging CSS Best Practices
语义类介绍可参考文章: http://maintainablecss.com/
通过界面元素实际代表的意义来命名,并编写样式的类。
原子化 CSS(Atomic CSS),是 Yahoo 提出来的一种独特的 CSS 代码组织方式,应用在 Yahoo 首页和其他产品中。ACSS 的独特性在于它的理念与一般开发人员的理解有很大的不同,并挑战了传统意义上编写 CSS 的最佳实践,也就是关注点分离原则。ACSS 认为关注点分离原则会导致冗余、繁琐和难以维护的 CSS 代码。 ACSS 的原则是把 CSS 样式打散成尽可能小的部分,每个 CSS 类只对应一条样式规则,从而达到最大化的可复用性。比如 CSS 类 M(10px)所对应的样式规则是 margin: 10px。在应用 CSS 样式时,只需要在把所需要的原子化 CSS 类名添加到 DOM 元素上即可。
一个原子类一般只包含一种或一类样式属性,所以也叫属性类,而一种属性大多代表视觉表现上某种呈现,所以,一个原子类也就描述了视觉上的某个方面
哪里使用
应用上述原则之后的一个模块结构有可能类似这样