如何组织CSS
按以下顺序书写CSS样式,主要原则是区分优先级的分类
SASS继承(Sass Inheritance)
@extend
, @mixin, 像clearfix
生成内容(Generated Content)
content
位置和布局(Position and Layout)
position
, z-index
, top
, bottom
, left
, right
, Flexbox属性
, float
, clear
显示和可见性(Display and Visibility)
display
, opacity
, transform
裁剪(Clipping)
overflow
, clip
动画(Animation)
animation
, transition
盒模型(Box model, 从外到内)
margin
, box-shadow
, border
, border-radius
, box-sizing
, width
, height
, padding
背景(Background)
background
, cursor
排版(Typegraphy)
font-size
, line-height
, font-family
, font-weight
, font-style
, text-align
, text-transform
, word-spacing
, color
伪类和伪元素(Pseudo-class and pseudo-elements)
:hover
, :focus
, :active
, :before
, :after
, :first-child
, :last-child