5 Vinkkejä ja vihjeitä Miten Optimoi Sinun CSS, Tutorials

5 Vinkkejä ja vihjeitä Miten Optimoi Sinun css

Tässä artikkelissa löydämme että miten optimoida Css.This on hyvin yksinkertainen ja perusvalinnoista vinkkejä web-suunnittelijoille ja kehittäjille. Paitsi että nämä vihjeet vähentää tiedoston koko teidän CSS-tiedoston, mutta he myös nopeuttaa teidän koodaus, jos haluat tehdä joku CSS käsin.

1. Käytä CSS pika


  Ennen 

  p ( 
  ; margin-top: 5px; 
  ; margin-right: 10px; 
  ; margin-bottom: 15px; 
  ; margin-left: 20px; 
  ) 


  Jälkeen 

  10px 15px 20px ; } p (margin: 5px 10px 15px 20px;)

2. Poista Tarpeettomia tyhjätilamerkit


  Ennen 

 width : 900px ; height : 100 %; margin : 0px ; padding : 0px ; background-color : #cccccc ; } . wrap (width: 900px; korkeus: 100%; margin: 0px; padding: 0px; background-color: # cccccc;) 
  Jälkeen   width : 900px ; height : 100 %; margin : 0px ; padding : 0px ; } . wrap (width: 900px; korkeus: 100%; margin: 0px; padding: 0px;)

3. Käytä pika värit

Tavallinen hex värit on määritelty kolme punainen, vihreä ja sininen kolmoset, kuten tässä:

  : #fdca30 ; } p (color: # fdca30;) 

Voit lyhentää värit, joilla on sama arvo kunkin parin, joka on # rrggbb;, jossa vain yksi arvo per pari, niin tämä:

  : #ffcc00 ; } p (color: # FFCC00;) 

tulee tämän käyttäen pika hex nuotinnusnäkymässä:

  : #fc0 ; } p (color: # fc0;) 

Nimi värit voidaan helpottaa huoltoa, mutta ne ovat yleensä pidempiä kuin niiden pika hex ekvivalenteiksi (muu kuin punainen ja tan).

4. Käytä descendant valitsimet

  color :red ; } div. varoitus p (color: red;) 

  > <div class = "warning"> 
  <p> Varoitus!  Sulaisi pian. </ P> 
  </ div> 

5. Käytä css CompressTools

jos et halua tuhlaa aikaa muokkaamalla vanhoja tyylisivut voit käyttää online css compress työkalut, se tee työtä sekuntia
Tarkista tämä online css compress työkalut ...
Css Tidy
Clean css
Css Optimiser
Flumpcakes css optimizer
cssdrive css Comperasor
W3C CSS Validator