如何组织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