Good programmers web front-end route to share learning css modular approach , this article introduces the css modular approach, css modular solutions possible and js as much, following a brief introduction of several major module program, very practical value need of small partners can refer to .
css modular solutions possible and js as much, following a brief introduction of several major module program.
oocss
The face of the rules of the object, are the two main principles: separation structure and appearance of the separation container and content.
Glossary
1 , isolated structure and appearance: increase the repeating design units, and simultaneously to promote the products ui Considerations in this area, such as the following css naming rules and modular use of the object model.
2 , the separation container and content: refers to the use pattern is not unique to match the position of the element, anywhere you can use this style, if you do not apply this style will remain the default style.
Examples
| // dom structure <div class="toogle simple"> <div class="toogle-control open"> <div class="toogle-tittle">标题</div> </div> <div class="toogle-details "></div> </div> |
|
|
|
|
| // tag that uniquely identifies the module .toggle{ } // skin writing style, if the basic structure is the same, you can use a secondary form of complex .toggle.simple{ } // do if you believe a lot of writing nested preprocessor supports nested part will then many people will write, not recommended .toogle{ .toogle-control{ } .toogle-details{ } } // In fact, you'll organize it so it is not recommended that this will reduce the query efficiency if we can confirm uniqueness when in fact the child can write directly .toogle{} .toogle-control{} .toogle-details{} |
|
smacss
sma and oocss there are many similarities, but there are many places to distinguish, primarily the classification of style. Namely: basic, layout, modules, state, theme
basis
Can be applied to any position, I also called the Global Style
layout
The main features are used to achieve different layouts, layout reuse rate increase,
Module
Modular design, a reusable unit, generally coupled to binding dom + css.
status
Describes the layout or specialized performance in a particular state of the module, in the case where dom structure intact may be achieved through the skin pattern of the css revision.
theme
Compared with the state more customized, we will for some special module, set the theme, including a range of colors, dimensions, etc. severe interaction design, parametric design.
Case
| // dom structure <div class="toogle toogle-simple"> <div class="toogle-control is-active"> <div class="toogle-tittle">标题</div> </div> <div class="toogle-details "></div> </div> |
与oocss相比，其实大部分设计思路是一样的，以一个类作为css的作用域（作用域就是两个限制，1 不符合场景时限制禁止使用 2 符合场景时要正确的使用），另外的区别就是针对皮肤和状态的不同书写规则。
bem
bem就是块、元素、修饰符的思维去写样式。它不涉及具体的css结构，只是建议你如何命名css.
案例
| // dom结构 <div class="toogle toogle--simple"> <div class="toogle_control toogle_control--active"> <div class="toogle_tittle">标题</div> </div> <div class="toogle_details "></div> </div> |
解释
1、块级：所属组件的名称
2、元素：元素在组件里的名称
3、修饰符：任何与元素修饰相关的类
这种命名方式的缺点，样式名会很长，但实际上在smacss以及oocss中都会一定程度的使用，命名很语义化，在不清楚模块时，我们可以根据样式名得出对应的结构可能是如何的。
选择合适的方案
无论哪种方案，关键是哪种是最合适团队的，我们目前的方式是：bem和smacss集合的方式。