CSS voi olla erittäin tehokas merkintäkieli suunnittelijoille.
Kuitenkin tuotettu CSS on vain yhtä hyvä kuin periaatteet, joita koodin luojaaja seuraa.
Vaikka saatat ajatella, että kukaan voi kiertää CSS: ää, on suuri ero CSS: n kirjoittamisen ja huipputason CSS: n tuottamisen välillä.
Jotta voit olla oikealla tiellä, tässä on kahdeksan CSS-periaatetta, jotka jokainen web-suunnittelija noudattaa.
Jos aiot sijoittaa aikaa koodaus CSS, on vain järkevää ottaa aikaa vahvistaa luomasi koodi. Kuitenkin, se ei koskaan enää hämmästy minulle, kuinka monta suunnittelijoita ohittaa tämän tärkeän askeleen. Koodin vahvistaminen mahdollistaa ongelmien siistin ja varmistaa, että se toimii hyvin vierailijoillesi.
CSS-tiedoston validoinnin lisäksi sinun on myös vahvistettava HTML- tai XHTML-tiedostot. Ennen kuin vahvistat nämä tiedostot, varmista, että olet käyttänyt aikaa ilmoittaa oikea HTML- tai XHTML-dokumentti. DOCTYPE: n ilmoittaminen voi tuntua arkipäiväiseltä yksityiskohdalta, mutta en voi luottaa siihen, kuinka monta keskustelua minulla on ollut turhautuneilla suunnittelijoilla, joilla oli edelleen ongelmia suunnittelussa, vain selville, että se johtui siitä, että he olivat julistaneet vanhentuneen DOCTYPE (tai ei ollut julistanut DOCTYPEä ollenkaan).
Olipa kyse projektista yksin tai suunnittelijoiden kanssa, on tärkeää dokumentoida luomasi teos. Luultavasti näet, miksi tämä olisi tärkeää suunnittelutiimin yhteydessä, mutta saatat ihmetellä, miksi se olisi väliä, jos työskentelet sooloprojektilla. No, on aina mahdollista, että sooloprojekti muuttuu lopulta ryhmäprojektiksi, ja jos näin tapahtuu, on paljon helpompaa saada käsillä olevaa dokumenttia kuin yrittää taaksepäin ja luoda sen. Kuitenkin, vaikka projekti pysyisi yhden miehenäytöksenä, saatat olla yllättynyt siitä, kuinka hyödyllistä dokumentaatiota on, kun päätät palauttaa hankkeen sen jälkeen, kun sitä ei ole tarkasteltu vuodella.
CSS-koodin luomisen osalta useimpien suunnittelijoiden luonnollinen impulssi on lisätä se suoraan koodiinsa asettamalla se välille / * ja * /. Kuten monet tässä luettelossa esitetyt periaatteet, ei ole mitään teknisesti virheellistä lähestymistapaa. Kommenttien lisääminen suoraan CSS-koodiin lisää kuitenkin tiedoston kokoa, mikä puolestaan voi lisätä latausaikoja ja hidastaa verkkosivuston yleistä tehokkuutta. Jos olet vakavasti kirjoittamassa huipputason CSS-koodia, sinun pitäisi dokumentoida koodisi, mutta erillisessä tiedostossa.
Vaikka uskonkin, että on tehokkaampaa dokumentaatiota erillisessä tiedostossa, tiedän, että on paljon tiedostoja, jotka eivät yksinkertaisesti ole samaa mieltä tämän käytännön kanssa. Jos hylkäät asiakirjat erillisessä tiedostossa, seuraava paras tapa on käyttää CSS-kompressoria (itse asiassa, vaikka päätät käyttää erillistä tiedostoa dokumentaatioon, voit silti hyötyä CSS-kompressorista). Voit käyttää tätä CSS-kompressori CSS Drive Galleryista tai yksinkertaisesti hae Google löytää vaihtoehtoinen CSS-kompressori.
Vaikka hakkereista on tullut hyväksyttävä käytäntö monille CSS-yhteisön sisällä, tämä ei tarkoita, että "CSS-hakkerointi" on periaate, jonka pitäisi noudattaa. Suunnittelun tämän lähestymistavan ongelma on, että tarkoitat tarkoituksellisesti monimutkaista ratkaisua ongelmiin. Vaikka saatat ajatella, että yksi tai kaksi hakkeri joka kerta ei satuta ketään, joutuminen "hakkerointiin" -tyyppiseen ajatteluun mahdollisista ongelmista voi vaikuttaa kielteisesti yleiseen suunnitteluominaisuuteen.
Häiriöiden välttäminen on neuvo, jota asiantuntijat ovat jakaneet jonkin aikaa. Voit mennä takaisin koko vuodelle 2003 ja nähdä sen Peter-Paul Koch (joka on toteutunut kehittäjä ja kirjoittaja) on varoittanut suunnittelijoita CSS-hakkerien vaikutuksista jo jonkin aikaa: "Monimutkaisuuden hirviö on palannut uudestaan, aivan nykyajan web-kehityksen keskellä. Nykyään se ei ilmaise itseään loputtomasti sisäkkäisenä pöydänä, vaan loputtomasti monimutkaisena CSS-hakata. "
Koska divs tarjoaa suurta joustavuutta, niitä voi olla liikaa liikaa. Itse asiassa tämä asia on tullut niin yleiseksi suunnittelijoiden keskuudessa, että CSS-yhteisö on luonut oman terminsä merkitsemään tätä asiaa: divitus. Jotta vältetään joutuminen tähän ehtoon, ennen kuin käytät automaattisesti div-tunnistetta, sinun tulee aina kysyä itseltäsi, onko olemassa todellinen HTML-tunniste, joka saa sinut tehtäväksi. Esimerkiksi useiden otsikkorivien luomisen sijasta miksi et käytä jo olemassa olevia HTML-otsikkotunnisteita, kuten H1 ja H2?
Kun aloitat div-aiheisten kysymysten ottamisen huomioon, näet nopeasti hyödyllisen HTML-tunnisteen käytön etuna uuden divin luomisen sijaan. Ei vain se voi vähentää koodin määrää, joka sinun on luotava (mikä säästää aikaa ja vähentää verkkosivujen latausaikaa), mutta se myös antaa koodisi loogisemman rakenteen.
Jos pyydät uutta tai kokematonta suunnittelijaa siitä, miten he päättävät nimetä luokkansa, he voivat sanoa, että sillä ei ole väliä. Vaikka tämä on teknisesti totta, tämä on hyvin lyhytnäköinen näkymä CSS-luokkien nimeämisestä. Vaikka suunnittelijatkin kuuluvat luokkaan, joka ei ole huolta CSS-luokkien nimistä, on myös suunnittelijoita, jotka ajattelevat luokkojensa puolesta, mutta he todella käyttävät väärää lähestymistapaa.
Koska en halua yksinkertaisesti voittaa teitä teoreettisilla esimerkeillä, kerron tämän konkreettisesti. Sanotaan, että luot luokan, jolla hallitset yhtä sivusi laatikoista. Laatikko sijaitsee sivun alareunassa, se sisältää kommentteja lukijoilta ja käytät CSS: ää antamaan sille ruskeaa taustaa ja hallita pehmusteita. Sen sijaan, että nimitettäisiin tämä .tan-box (joka on mitä monet hyvää tarkoittavat suunnittelijat tekisivät), nimeä se. Box-boxiksi. Syy, että .com-laatikko on parempi luokkakortti kuin .tan-box, koska jos päätät muuttaa taustan värin siniseksi tiellä (tai päättää siirtää laatikon sivun alareunasta toiseen alueeseen) , se ei sekoita sinua tai muita suunnittelijoita, jotka katsovat kyseisen verkkosivuston CSS: ää.
Vaikka lyhyt versio voi olla hämmentävää suunnittelijoille, jotka ovat juuri aloittaneet kirjoittavan omia CSS-koodiaan, kun olet tottunut stenografiatyyliin, siitä tulee yksi tehokkaimmista käytännöistä, joita voit seurata suunnittelijaasi .
Lyhytnumeroiden käyttö on monta hyödystä. Yhdessä se vähentää tiedostosi kokoa, mikä vähentää verkkosivustosi latausaikaa. Lisäksi se helpottaa koodin järjestämistä, mutta helpottaa myös koodin muuttamista tulevaisuudessa. Kun aloitat mukauttamisen lyhytsanomaan, sinun pitäisi myös käytännössä kirjoittaa koodisi yhdelle riville (sen sijaan, että voit levittää ilmoituksia useilla rivillä).
Suunnittelijana olet paljon teknisempää kuin kukaan muu valtavirran väestössä. Koska olet osa vähemmistöä, joka elää ja hengittää tekniikkaa, sinulla on paljon tapoja, joita sinulla useimmat muut ihmiset eivät ole koskaan ajatelleet. Olet esimerkiksi luultavasti poissa tieltäsi poistamasta mahdollisimman paljon paperipolkua elämässäsi. On kuitenkin tärkeää muistaa, että suurin osa väestöstä edelleen tulostaa asioita säännöllisesti. Vaikka olet todennäköisesti merkitä kohteen del.icio.us-tiedostoon, kun haluat tallentaa sen myöhempää käyttöä varten, keskimääräinen Internet-käyttäjä tulostaa saman sivun.
Koska ihmiset vielä julkaisevat tietoja Internetistä, on tärkeää käyttää CSS-tekniikkaa, jotta sisältösi tulostus on ystävällistä . Vierailijat arvostavat kaiken työn, jota olet tehnyt luomaan kauniin ulkoasun verkkosivustolle, jonka he vierailevat, mutta kun he päättävät tulostaa sivun kyseisestä verkkosivustosta, he arvostavat sinua vielä enemmän, kun he ymmärtävät, että heidän tulosteensa sisältävät vain tekstiä, jota he haluavat (ja mikään hämmästyttävä grafiikka, joka näyttäisi hyvältä tietokoneeltaan, mutta tuhlaisi tonnia mustetta tulostimestaan). Koska CSS: n avulla on helppo varmistaa, että sisältö on muotoiltu oikein tulostettaessa, ei ole mitään tekosyytä todellisen suunnittelijan laiminlyönnille tämän suunnitteluprosessin vaiheelle.
Saatat ajatella, että tämä lopullinen periaate kuulostaa cliché, mutta se on väistämättä tärkein koko luettelosta. Jos olet omistautunut parhaaksi mahdolliseksi suunnittelijaksi, sinun on varmistettava, että työskentelet jatkuvasti laajentamaan tietämystäsi CSS: stä . Onneksi tämä on helppo tehdä, jos sinulla on halu ja halu sitoutua jatkamaan CSS-koulutusta. Vaikka jatkuva koulutus voi olla vaikea tehtävä monilla teollisuudenaloilla, jotka eivät ole teknisiä, koska Internet on kirjaimellisesti CSS: n perusta, vapaat resurssit, joista voit oppia, ovat kirjaimellisesti loputon. Jos luulet liioittelen, kirjoita vain "CSS" Googlelle ja näet, että selailua on 483 000 000 tulosta.
Sen lisäksi, että opit online-resursseista (ja haluat tulostaa resurssit, jos haluat), voit oppia paljon muista CSS-suunnittelijoista. Olipa heidän työnsä analysoitava, kuunneltava neuvoja, jotka he antavat verkossa tai puhuvat heille kasvotusten tilanteissa, voit saada paljon hyötyä vuorovaikutteisesti ja mahdollisesti yhteistyössä muiden suunnittelijoiden kanssa, jotka ovat sitoutuneet noudattamaan huipputasoisen CSS-mallin ja tuottavan hämmästyttäviä töitä.