5 Lépéseket kell jobb CSS Part II
Ez a második része az 5 Lépéseket kell jobb CSS. Rengeteg olyan CSS oktatóanyagok állnak rendelkezésre az interneten, de a kevés tutorials hasznosak is. Ez a bemutató talál 5 lépést kell jobb css kódot itt a következő projekt weboldalán. Remélem tetszeni fog ez a bemutató.
1. Tartsa CSS nyilatkozatok egy sorban
Mindig tartsuk CSS nyilatkozatok egy sorban, segít megtartásával CSS fájlban tiszta és kisebb. Azt is segít eltávolítani a nem kívánt tereket és karaktereket.
Jó kód
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Rossz kód
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
2. Elemeket:
Az egyik legjobb módja annak, hogy mentse sornyi kódot csoportba szelektor. Van néhány példa az alábbiakban, hogy mi vagyok utalva.
Jó kód
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Rossz kód
h1 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; ) h2 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; ) h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
3. Használja a "Margin" a Center Layout
Sok kezdő a CSS nem tud rájönni, hogy miért nem lehet egyszerűen használni float: center, hogy elérni, hogy középre hatása a blokk-szintű elemek. Ha csak úgy volt, hogy egyszerű! Sajnos, el kell használni.
Fejezetkód
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * felső, alsó - és balra, jobbra * / width: xxxpx; )
4. Hozzászólás a CSS
Ez egy jó ötlet a comment kódot gondot. , Aki értékeli, egyszerű telepítése / * megjegyzés mögött, és * / zárni, valahogy így:
Fejezetkód
/******** KÓD Start Here ********/
5. Használja CSS tömörítése Tools
Ha nem akarod, hogy pazarolja az idejét módosulna a régi stíluslapok akkor egyszerűen használható internetes eszközök css tömöríteni, ez teszi a munkát a második.
ez az online check css tömörítés eszközök ...
CSS Tidy
Tiszta Css
Optimalizálóval css
Flumpcakes Css optimalizáló
cssdrive Css Comperasor
A W3C CSS Validator
Következtetést
Ez csak néhány a tipp, hogy segítsen nekem, hogy jobb kódot írni. Remélem, hogy a tutorial is segíteni fogja írni, hogy a jobb és a tiszta kódot. Tippek, hogy alkalmazzák ezeket a jelenlegi és a következő projekteket, és akkor biztosan értékelni az erőfeszítéseket.
Ha úgy gondolja, hogy tutorial nagyobb lehet, jobban, kérjük ossza meg velünk. Hozzászólás minket
Ha szeretne többet oktatóanyagok kapni tőlünk, kérjük, fontolja meg a feliratkozást a feedre az RSS, vagy e-mailben.
Promote Us
Kapcsolódó cikkek:
Ha élvezettel olvasta ezt a cikket, kérlek nézd meg a többi kapcsolódó cikkek a következők:
Revell says on: november 27, 2009 at 9:05 Said:
Szia,
Először is, szép cikk! Kevés olyan cikkeket, amelyek foglalkoznak az írás stílusa CSS. Lenne néhány gondolat az első pontot mégis. Véleményem szerint ez jobb-hoz használ a hosszú írói stílusát, míg a fejlődő és a szkript "kisebbít" a CSS használata során, hogy egy élő környezetre.
Dave says on: november 27, 2009 at 10:06 Said:
Teljes mértékben egyet az 1. pont. Ha megvan 3 nyilatkozatok, 1 sor kódot is nagyszerű, de ha van 6 vagy 7, akkor lesz igazán nehéz olvasni.
Minden, ami talán menteni 1KB? Én nem értem.
Más, mint hogy egy, néhány tisztességes ötletek itt.
Dave's blog .. utolsó 2 nagyobb kötelező darab, amely lehetővé teszi CMS dugó részére WordPress
Nicolo 'fasce mondja időpontja: november 27, 2009 at 10:34 Said:
Egyetértek Dave, a lényeg az 1 rossz, csak azért, mert ha dolgozik a csapat nagyon nehéz olvasni egy sor kódot.
Akkor be kell írni a kódot betűrendben ugyanerre a célra.
EJ Semeijn mondja időpontja: november 27, 2009 at 10:57 Said:
Miért hagyja abba kiküldetés ezek a tippek? Internet már tele van ezekkel alapjai tippeket. És én is egyet # 1. Nem teszi be a kódot könnyebb megérteni, ez csak megnehezíti azt.
Saját tippek az lenne, hogy terjesszen az oldal szerkezetét a CSS-t, hogy a szakaszok RESET, fejléceket, űrlapok, HTML-elemeket, betűtípusok stb Így a CSS könnyebb lesz megérteni.
safetycopy says on: november 27, 2009 at 9:38 Said:
Egyetértek több más emberek hozzászólások - 1 pont példája a rossz kód nem rossz kód - ez csak egy másik stílust. Ez az üzenet csak akkor lenne hasznos a teljes kezdőknek és mi nem akarjuk kezdeni tanította őket a rossz feltételezések már!
safetycopy utolsó blog .. Photo
Josh says on: november 29, 2009 at 4:38 Said:
Én mindegyik, kivéve az utolsót. Én nem találom hasznosnak tömöríteni az én css, de eltérően az összes előző olvasók én nagyon egyetértek a # 1 ponttal. Én csak elkezdtem írni az én CSS-egy sorban, és ez már óriási. A görgetés még messze csökkent. Azt hiszem, ez egy személyes preferencia. Valami, ami segít abban, hogy a szerkesztő használom pakolások a kódot le a következő sorba, tehát nincs vízszintes görgetést.
Josh's utolsó blog .. Addicted to Flickr
FAQPAL says on: november 29, 2009 at 4:06 Said:
Jó tanácsok kezdő, nem kisebbít CSS én sem, talán egy jóval nagyobb projekt számára előnyös lenne minifying, de az átlagos webhely nem igazán szükséges.
Ami a # 1 megy, azt hiszem, a megfogalmazás, ami dobás az embereket, ahelyett, mondván: "Bad kód", talán meg kell mondani, mint safetycopy azt javasolta, "Alternate kód".
FAQPAL utolsó blog .. Bubble Effect CSS
favSHARE says on: november 30, 2009 at 12:49 Said:
Ezt a cikket megosztott favSHARE.net. Menj és szavazzon meg!
favSHARE utolsó blog .. 25 Webes elrendezés Tutorials
: Jean-Patrick Smith says on: december 11, 2009 at 11:15 Said:
Általában Készíts egy PHP fájlt, amely magában foglalja mind az én css fájlokat, minifies, és hozzáteszi, tömörítés + lejár fejlécét.
Így nem kell egyetérteni pont # 1 ...
Mi a fontosabb, mint ha az összes CSS-egy vonal számának csökkentése HTTP hívások CSS sprites és összekapcsolja az összes CSS / JS egy file-ba.