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

上一篇下一篇

猜你喜欢

热点阅读