Mūsų geriausios praktikos gadina mus

Naršydamas internete radau visai tikslias skaidres apie blogas CSS praktikas. Pats jau senai esu pastebėjęs, kad dauguma žmonių naudoja blogas praktikas (pvz.: visiems elementams vietoj id priskiria class atributą), tad turėtų peržiūrėti kiekvienas dirbantis su CSS.

http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us

Naršydamas internete radau visai tikslias skaidres apie blogas CSS praktikas. Pats jau senai esu pastebėjęs, kad dauguma žmonių naudoja blogas praktikas (pvz.: visiems elementams vietoj id priskiria class atributą), tad turėtų peržiūrėti kiekvienas dirbantis su CSS.

 

http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us

paziurek i evernote source, pamatisi ka nors panasaus i

.wrapper#container {
   background-color: #ffffff;
   border-style: hidden;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   margin: 0 auto 0;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   width: 672px;
   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   padding: 15px 20px 20px 30px;
}

Pats jau senai esu pastebėjęs, kad dauguma žmonių naudoja blogas praktikas (pvz.: visiems elementams vietoj id priskiria class atributą), tad turėtų peržiūrėti kiekvienas dirbantis su CSS.

Kurioje vietoje bloga praktika, CSS kabliui naudoti klasę vietoje id ? Taip, id per plauką greitesnis, bet turi didžiulį minusą, kad negali būti naudojamas daugiau nei vieną kartą tame pačiame puslapyje. Gal daugiau ir nereikia kai kur, bet gal persigalvosi ir visur keitinėti reiks. Plius jei darai pvz #nav li {} ar .nav li {}, kadangi css skaito nuo dešinės tai ir to buvusio mažyčio greičio pranašumo nebėra.

Aš naudoju id beveik išimtinai tik kai reikia input laukus susieti su etiketėmis pvz.:

<input type="text" id="vardas" />
<label for="vardas">vardas:</label>

Būtent, id yra unikaliems stiliams priskirti, o class dažnai naudojamiems. Kas greitį liečia, taip galbūt naudojant id į serverį reik siųsti 3 simboliais mažesnį žodį, bet šiaip tai greičiui neturi reikšmės...

Klases ne tik naudoti patartina, bet ir privaloma plačiau: http://www.stubbornella.org - žmogus prisijungęs prie facebook css optimizavimo projektų taip pat prie oocss framework'o paremto class'ėmis.

Keletas patarimų iš ilgos patirties:

px/pt/em/% - visi jie yra naudojami tam tikrose css scope'uose (jei galima taip pavadinti). Neužsisėskit vien ant pixelių darant general layout'us ar vien ant %/em(em - beje Safaris supranta kitaip, būkit atsargūs).

nth-child selectoriai - IE8 jo nesuportina.

<select></select> - nebandyk šito elemento keisti su css, nes jo stilius imamas iš OS, galima naudoti jQuery libus, tačiau taip pat tik oficialius ne šiaip kokių žmogelių parašytus, kad paskui nebūtų one-way užklausos. Patariu

http://developer.yahoo.com/yui/examples/button/button-menu-select.html .

font-face - prašau, pamirškite.

reset - pamirškite.

@import - pamirškite.

floats - nenaudokite floatų contento kūrime nebent kitaip neįmanoma, floatai yra naudojami tik dizaino layoute, ne menu, navigacijose ar data tablesouse - viską galima padaryti be jų.

IE6, IE7 - pamirškite. (Patariu naudoti IE atpažinimo pluginus ir pasiūlyti upgradinti IE naršykles, kaip vienas Australų portalas yra padaręs, visuose projektuose ir visiems klientams šitą bruku ir kai palyginam kainas su IE7/IE6 supportu, visi mielai priima mano pasiūlymą.)

Jokių css hackų - viską galima padaryti per IE conditional sentences (jei reikia ir atskirą css) plačiau: http://reference.sitepoint.com/css/conditionalcomments .

!import - kuo mažiau.

hardcoded style="" - stenkitės pamiršti.

Problemos su IE8 Compat Modes, IE9 Compat Modes - daug kalbėti apie tai, esmė kad dažniausiai šie modai UserAgent'o nurodomi kaip IE7 doc modai. Patarimas, jei nepadeda meta tagai - http://www.pinlady.net/PluginDetect/ puikus pluginas detectinant IE doc/browser modus su ClientCaps.

Search inputas - nestylinkit inputo palikit jį be borderio ir backgroundo ir įdėkit į bet kokį block elementą, nebeliks problemų Inputas + Button.

IE8 (arba senesnės jei vis dar developinat) - vaizdas neturi būti lygiai toks pat kaip Chrome'ės, stenkitės kaip tik jį padaryti tvarkingą tačiau jokiu shadow'ų/gradiantų/border-radiusų ir t.t. Vartotojas turi matyti skirtumą, tik taip išgelbėsime žmoniją nuo drakono IE.

Shadow'sai/Gradiant'ai ir kiti fancy dalykai - tai ne puošmena, naudokit šitus stilius tik tada kai reikia, naudokit juos kaip įrankį kažkam išryškinti, bet aišku čia jau linkstu į dizainą ne css kaip technologiją.

media-queries - naudokit! IE8 be respond.js nepalaiko - https://github.com/paulirish/matchMedia.js/ . IE7/IE6 manau visai nepalaiko (patikslinkit jei žinote geriau).

html5 tagai - naudokit, tik nepamirškit modernizer.js IE8 supportui.

http requests - visos iconos, pavieniai paveiksliukai - optimizuokit į sprite imigus. Tokių imigus kaip pattern'ų backgroundams - ne.

Sprite image/css cash - kiekvieną kartą po versijos atnaujinimo kai atsinaujina ir imigai ir css prie sprite image pridėkit kokią versiją "?ver2131" tada vartotojo UserAgent'as parsisiųs naują.

P.S. kai parašiau pranešimą pamačiau kad šitos temos kūrėjas įdėjo Nicolės skaidres. Šaunu eini gera linkme.

P.P.S. "At the end developers end up with FireBug" - Nicolė įvardija kaip minusą. Paklauskim savęs ar įmanoma developinti be firebug'o ir kaip ilgai mes be jo užtruktumėm :).