2.CSS模块化
2018-04-06 本文已影响0人
RZsnail
CSS设计模式:
OOCSS
面向对象CSS ,结构与设计分离,容器与内容分离
SMACSS
可扩展和模块化结构,减少代码量,简化代码维护
主要构成: Base, Layout, Module, State, Theme
Atomic CSS
比如:class="mt-10 w-100 h-15"
可以用作视觉功能小的,单用途的CSS
MCSS
多层级CSS
cosmetic, project, base, foundation
AMCSS
属性CSS, 例如: <div am-size="large" am-disabled></div>
BEM
block: header, container, menu, checkbox, input
element: menu item, list item, checkbox caption, head title
,modifier: disabled, highlighted, checked, fixed, size big, color yellow
示例:
<button class="button button-state-danger"></button>
CSS Modules