Recommendation on front-end development performance-how to reduce the size of CSS code

as more and more CSS Preprocessor popularity , some new tools and applications Program make it easier for web designers or developers to develop, such: css2less . Today I will share some of the usage of this tool, css2less is a ruby-developed tool used to convert CSS into a file in less CSS format

 

Tools used

This tool allows us to use our own CSSCodeEnter the CSS code to lose weight.So let me give it a try.There is a file to be converted. The following is the CSS code.

 NAV { Height : 40px ; Width : 100% ;Background : #000 ; Border-bottom : 2px solid # fff ;} NAV ul { Padding : 0 ; Margin : 0 auto ;} NAV Li { Display : Inline ; Float :Left ;} NAV { Color : # Fff ; Display : Inline-block ; Width : 100px ; Text-shadow : 1px 1px 0px #000 ;} NAV Li { Border-Right : 1px solid # fff ; Box-Sizing : Border-box ;} NAV Li: Last-Child { Border-Right : 0 ;} Nav a: hover, nav a: active { Background-color : # Fff ;}

 

The following is the result.

Nav a: hover, nav a: active { Background-color : # Fff ;} NAV { Height : 40px ; Width : 100% ; Background : #000 ; Border-bottom : 2px solid # fff ;A {color : # Fff ; Display : Inline-block ; Width : 100px ; Text-shadow : 1px 1px 0px #000 ;} Ul { Padding : 0 ; Margin :0 auto ;} Li: Last-child { A {border-Right : 0 ;} } Li { Display : Inline ; Float : Left ; A {border-Right : 1px solid # fff ; Box-Sizing : Border-box ;} }} 

 

As we can see above, our old CSS code is greatly reduced, and the abbreviated method is left. The advantage is to reduce the pressure on the server,

Limitations

However, we can also see some restrictions and conversion results.In the old CSS, we have several identical codes and two statements about the border.Border-bottom: 2px solid # FFF;AndBorder-Right: 1px solid # FFF; We only need to manually make other possibilitiesSolutionLimitations. Although there are still restrictions, this tool can save our time and nested CSS rule sets are very helpful.