Toto je druhá část 5 kroků pro lepší napsat CSS. Existuje spousta tutoriálů CSS jsou k dispozici na internetu, ale málo cvičení jsou užitečná. V tomto tutoriálu najdete 5 kroků k lepší napsat css kód pro další webové stránky projektu. Doufám, že se vám bude líbit tento tutoriál.

1. Uchovávejte CSS prohlášení v jednom řádku

byste měli vždy CSS prohlášení v jednom řádku, pomáhá udržet si CSS soubor čisté a menší. To také pomáhá odstranit nechtěné mezery a znaky.

Dobrý kód

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

Bad kód

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

2. Kombinují prvky

Jeden z nejlepší způsob, jak zachránit řádků kódu je seskupením selektory. Tam jsou některé níže uvedené příklady toho, co jsem na mysli.

Dobrý kód

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

Bad kód

 : 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. Použití "Rezerva" do centra Layout

Mnoho začátečníků až po CSS nemůže přijít na to, proč nemůžete jednoduše použít float: center pro dosažení tohoto účinku se soustředil na bloku-úrovni prvků. Jen kdyby to bylo tak jednoduché! Bohužel, budete muset použít.

Kód

  # Kontejner (
 ; /* top, bottom - and left, right*/ margin: 0 auto; / * nahoru, dolů - a vlevo, vpravo * /
 width: xxxpx;
 ) 

4. Váš komentář CSS

Je to skvělý nápad, aby se vyjádřil svůj kód v sekcích. Chcete-li přidat komentář, stačí přidat / * za komentář, a * / je zavřít, například takto:

Kód

  /******** CODE START HERE ********/ 

5. Použití CSS Compress Nástroje

Pokud nechcete ztrácet čas na změnu vašeho starého stylů můžete jednoduše použít on-line komprimaci css nástroje mají dělat svou práci v několika sekundách.

šek tato on-line css kompresní nástroje ...

Css Tidy

Clean Css

Css optimalizaci

Flumpcakes Css optimalizátor

cssdrive Css Comperasor

W3C CSS validator

Závěr

To jsou jen některé z tipů, které mi pomohou psát lepší kód. Doufám, že tutoriál vám rovněž pomůže psát lepší a čistý kód. Použít tyto tipy na aktuální a další projekty, a vy jistě ocení úsilí.

Pokud si myslíte, že cvičení může být lepší, prosím, podělit se s námi. Komentář nás

Pokud chcete získat více tutoriály od nás, prosím, přihlašte se náš RSS s RSS nebo e-mailem.

Soubor pod: Css, Návody admin