https://github.com/y1xl/CSS-abbreviation
1. The hexadecimal color value, if the value of every two digits is the same, it can be abbreviated by half. Such as:
- color: #ffffff => color: #fff
- color: #aabbcc => color: #abc
2. Border syntax sugar
frame:
border: width style color; => border: (side width) (style) (color);
如：border: 1px solid #000;
No border can be written directly: border: none
Same goes for border-top / -bottom / -left / -right
Border image:
border-image: source slice / width / outset repeat; =>
border-image: (image) (crop area) / (border image width) / (spread) (stretch or tile)
如：border-image: url(button.png) 0 14 0 14 stretch;
3. Background syntactic sugar
background: color image repeat attachment position; => backgroud: (color) (image path) (repeat) (fixed) (position);
如：background: #fff url('image.png') no-repeat fixed center;
CSS3 new writing:
background: color image repeat attachment position/size origin clip;
=> background:size (image size) origin (positioning area) clip (cropping)
4. Font Syntax Sugar
Abbreviated font definition, at least two values of font-size and font-family must be defined
font: style variant weight size/line-height family => font: (style) (variant) (weight) (size)/(line-height) (font)
5. List
List property abbreviations:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.png);
=> list-style: square inside url(image.png);
To cancel the default dot or serial number, you can directly write list-style:none;
6, flex flexible layout
flex-flow: direction wrap; => flex-flow: (arrangement direction) (line wrapping);
flex: grow shrink basis; => flex: (item enlargement ratio) (item shrinkage ratio) (main axis space occupied by item);
The flex property has two shortcuts: flex: auto; => flex: 1 1 auto and flex: none; => flex: 0 0 auto