Tai yra antroji dalis, 5 etapai Rašyti Geresnis CSS. Yra daug CSS Pamokos galima rasti internete, bet mažai tutoriale yra naudinga. Šiame pavyzdyje rasite 5 žingsnių siekiant geriau parašyti CSS kodą kitą tinklapį. Tikiuosi, jums patiks ši pamoka.

1. Laikyti css vienoje linijoje

reikia visada laikyti css į vieną liniją, ji padeda išlaikyti Jūsų CSS failas švarus ir mažesnių. Ji taip pat padeda pašalinti nepageidaujamų tarpų ir simbolių.

Gera Kodas

  ; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # CCCCCC;) 

Bad kodas

  H2 
 (
 font-size: 18px;
 ; color: # 333333;
 ; background: # CCCCCC; 
 ) 

2. Apjungti elementai

Vienas iš geriausių būdų taupyti eilutes kodo yra grupuojant selektoriai. Yra keletas žemiau, ką aš kalbu pavyzdžiai.

Gera Kodas

  H1, H2, H3 (
 ; color : # 333 ; font-family: arial, helvetica, sans-serif; color: # 333;
 ) 

Bad kodas

 : Arial, Helvetica, sans-serif ; color : # 333 ; } h2 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h3 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h1 (font-family: arial, helvetica, sans-serif; color: # 333;) h2 (font-family: arial, helvetica, sans-serif; color: # 333;) h3 (font-family: Arial, Helvetica, sans-serif; color: # 333;) 

3. Naudokite "maržą" iki centro maketas

Daugelis pradedančiųjų į CSS negali suprasti, kodėl tu negali tiesiog naudoti float: center pasiekti, kad centre veikia blokinis elementai. Jei tik ji buvo paprasta! Deja, jums reikės naudoti.

Kodas

  # Konteineris (
 ; /* top, bottom - and left, right*/ margin: 0 auto; / * viršuje, apačioje - ir į kairę, dešinę * /
 Plotis: xxxpx;
 ) 

4. Komentaras jūsų CSS

Tai puiki idėja komentarą kodą į skyrių. Norint pridėti komentarą, tiesiog pridėkite / * už komentarą ir * /, kad jį uždaryti, kaip kad:

Kodas

  /******** KODAS Start Here ********/ 

5. Naudokite CSS Suspausti Įrankiai

jei nenorite gaišti laiko pakeisti savo seną stilių galite tiesiog naudojasi interneto CSS suspaudimo įrankiai, jis padarys Jūsų darbą per kelias sekundes.

patikrinti šios internetinės CSS suspaudimo įrankių ...

Css tidy

Švarus Css

CSS optimizavimo

Flumpcakes Css optimizavimo

cssdrive Css Comperasor

W3C CSS Validator

Išvada

Tai tik keletas patarimų, kurie padės man rašyti geresnį kodą. Tikiuosi, kad pamoka padės jums parašyti geriau ir švaraus kodo. Taikyti šiuos Patarimai jūsų dabartinius ir šalia projektus, ir jums bus tikrai dėkingi už pastangas.

Jei manote, kad pamoka gali būti dar geriau, prašome pasidalinti su mumis. Komentaras mus

Jei norite gauti daugiau vadovėliai pas mus, prašom, galite užsiprenumeruoti mūsų kanalo RSS arba el.

Filed under: Css, Pamokos admin