CSS: ää voidaan verrata kuvanveistäjän työkalusarjaan; kuten veistokset työssä, suunnittelijat käyttävät CSS: ää luomaan jäsenneltyjä verkkosivujen ulkoasuja.

Vuosien mittaan tämä prosessi on organisoitu entistä paremmin; sääntöjä on otettu käyttöön koodauksen parhaiden käytäntöjen luomiseksi.

Tässä artikkelissa tarkastelemme joitain ideoita, joita voit käyttää kirjoitettaessa tyyliarkeja nopeuttaaksesi koodia.

Tehokas CSS on helppo hallita ja helppo lukea, ja se voi olla resurssi web-suunnittelijoille. Järjestäytyminen on iso askel, mutta CSS: n käyttäminen voi olla hieman monimutkaisempi.

Kun luet tämän artikkelin, pidä omat mieltymyksesi mielessä. parhaan neuvoja, joita voit saada kehittäjältä, on löytää oma toimintatapa. Yhdistä muutamia tekniikoita omien menetelmien avulla, jotta saat kaiken hyödyn.

Miksi vaivata Streamlining CSS?

Monet suunnittelijat hämmentävät etu- ja back-end-kieltä puhuttaessa jäsentelykoodista. CSS ja HTML ovat etusuuntaisia ​​suunnittelun kieliä, joita käytetään verkkosivujen elementtien muotoiluun ja muotoiluun. Vierailijan selaimella ladataan ja jäsentää tiedostoja, mikä tarkoittaa, että etupään koodilla on huomattava latausaika.

Selaimen lataama ja analysoitava koodi vie aikaa lukea ja laskea, aivan kuten back-end-kielillä kirjoitettu koodi (kuten PHP tai Ruby). Streamlined CSS voi suuresti hyödyttää verkkosivustoa, koska se voi lyhentää latausaikoja ja nopeuttaa sivu-elementtien jäsentämistä.

Edut eivät ehkä ole ilmeisiä nykypäivän nopeiden yhteyksien ja kehittyneiden käyttöjärjestelmien kanssa. Voit halutessasi tarkastella verkkosivustoasi mobiiliselaimella vertailemaan latausaikoja ja tarkastelemaan verkkosivuston lataamista.

Business Boardroom

Kun CSS on koodattu tehokkaasti, sinun pitäisi nähdä verkkosivujen elementtien muoto ja tyyli, kun niitä käsitellään. Tämä voi näyttää erilaiselta kuin selaimesta selaimeen, mutta se käy edelleen. Mitä enemmän testaat verkkosivustosi koodia, sitä enemmän näet sen.

Pidä koodisi standardoitu ja yksinkertainen. Jos päivität blogiasi tai henkilökohtaista verkkosivustoasi muutaman kuukauden kuluttua alkuvaiheen kehityksestä, tutut CSS-tyylit, jotka olet perehtynyt, ovat helpommin kuin uusien käsitteleminen. Mukauttaminen vakiintuneita standardeja auttaa pitkällä aikavälillä.

Kuinka työskennellä tehokkaalla koodilla

Aloita koodaustyylit äärimmäisen tehokas, sinun täytyy ottaa käyttöön uusia ideoita. Nämä ovat CSS-tekniikoita, joita nykyään käyttävät huipputekniset Internet-sivustot ja sovelluskehittäjät.

Pidä koodi yksinkertaisena

Tämä voidaan helposti unohtaa. Kun kartoitat datatietojasi tyylillesi, pidä se yksinkertaisena. Luo datasarjoja sarakkeessa, jos tarvitset.

Cascading Stylesheets

Aloita luomalla luettelo eri osista työskentelemään tyyleissasi. Voit sisällyttää tekstiä, lomakkeita, ulkoasua, otsikoita, alatunnisteita ja mitä tahansa muuta mitä tarvitset. Jos haluat todella organisoida, voit jakaa sen muutamiin tunnettuihin tyyleihin, kuten id tai class navigointiyhteyksiin.

Tämä ensimmäinen vaihe auttaa luomaan verkkosivustosi suunnitelman tavallisilla sanoilla ennen kuin pääset mille tahansa tyylikielelle. Jälkeenpäin, istumalla kirjoittaa koodi on paljon yksinkertaisempi; sinulla on resursseja koskeva luettelo, jonka avulla voit kaataa koodin lähes yliluonnollisella hinnalla.


Säilytä koodilohkot Delineated and Sparse

On käynnissä keskustelu siitä, miten CSS-koodi kirjoitetaan. Kun aloin aloittaa, käytin korttimerkintöjä, koska se oli kaikki mitä olin koskaan nähnyt. Yksilinjainen merkintä on kuitenkin paljon nopeampaa tekstin jäsentämisen ja luettavuuden parantamiseksi.

En aio tehdä asiaa, koska se jättää huomiotta lohkotyyppisen CSS: n. Kun olet tekemisissä tärkeän elementin kanssa tai id joka pitää sisällään kuusi tai seitsemän tärkeintä ominaisuutta, pitää se estetyissä muodoissa helpommin. Sinä erotat tyylisi tärkeät osat, mikä helpottaa niiden löytämistä yhdellä silmäyksellä.

Pitkien tyylejen lukeminen lohkareitissä on myös helpompaa, koska useimmat tekstieditorit käärivät pitkät viivat ja lukemalla ominaisuus-arvo-pareja voi saada hämmentävää, kun sinulla on 10 tai enemmän läpi. Koska web-suunnittelija on, sinun on tehtävä puhelu, miten avata CSS-koodi. Pidä tehokkuus mielessä ja käytä parasta arviota.

Yhteistyö muiden kehittäjien kanssa

Jos olet ammattimainen web-suunnittelija tai haluavat olla yksi, on mahdollista, että työskentelet tiimin kanssa ennemmin tai myöhemmin. Tämä voi olla siunaus tai kirous, riippuen joukkueesta.

Suunnittelijat ovat usein haluttomia tekemään suuria muutoksia työhönsä. CSS-koodi on hieman erilainen, koska yrität luoda kauniin ulkoasun käyttämällä vain arvo-ominaisuuksia, ja tiedostot saattavat tulla sekaisin, kun niitä välitetään muutamien käsien välillä. Pysy siis järjestyksessä.

Kommentit ovat tärkeä apu. Jos rivit tai koodilohkot saattavat sekoittaa tai johtaa muita harhaan, kommentit säästävät tunteja. Selitä kaikki, mitä laitat tyyliarkille niin tyylikkäästi kuin mahdollista.

Varmista, että päällekkäisiä tai liitettyjä tyylejä ei korvata. Kuvittele, että h1 että h4 otsikot on muotoiltu korkealle CSS-dokumentissa, mutta jotkut koodit alhaisemmat tekevät fonttejaan. Tämä voi olla äärimmäisen hämmentävä jollekulle, joka ei ole kirjoittanut koodia, ja joutuu nyt käymään läpi ja korjaamaan virheen.

Viestintä on myös kriittinen. Voisit kirjoittaa tehokkaimman koodin ympärille, mutta kommunikaation puute tulee tuomitsemaan tiimisi. Keskity käsillä olevaan työhön ja työskentele yhdessä ryhmän (ei vain oman) kanssa tuottamien luovien ideoiden kanssa.

Seuraa erillisiä CSS-asiakirjoja

Toinen tapa pitää koodi puhtaana ja organisoituna on pitää tyylityypit erillään. Tämä toimii hyvin suurille verkkosivustoille, joissa kaikki tyylejä yhdellä asiakirjalla olisivat epärealistisia.

Facebook on hyvä esimerkki. Se on todennäköisesti monta eri tyyliä eri sivuillaan: profiili, haku, rekisteröinti, valokuvat jne. Jos tyylit yhdistettäisiin yhteen tiedostoon, en haluaisi olla kaveri, jonka on lajitella koodi vain korjaa yksinkertainen vika.

Facebook saa paljon enemmän liikennettä kuin verkkosivustosi, mutta periaatteet ovat samat. Jos organisaatio on huolenaihe, erilliset tyyliarkit voivat mennä pitkälle. Web-suunnittelijat järjestävät usein koodin, joka perustuu rakenteeseen tallennetun asiakirjan (esim. Layout.css , text.css , forms.css ) perusteella.

CSS Design Workdesk

Kaikki tyylit eivät ole ladattavissa kaikilla sivuilla. Ja tässä on hyötyä: menetelmä mahdollistaa paremman mukauttamisen sivustosi rakentamisessa. Voit leikata parsing aika valtavasti vain luomalla erilliset näkymät ja tyylejä.


Testaus Tuki IE: lle

Web-kehittäjät ovat aina maalanneet Internet Explorerin konseptina, erityisesti CSS: ssä. Onneksi voit käyttää ehdollisia kommentteja (jotka näyttävät tavallisilta kommentteilta useimmille selaimille) HTML-muotoon.

Voit käyttää näitä käyttämään tyylejä Internet Explorerissa. Tarkista ehdolliset kommentit, jos et tunne niitä. ne voivat osoittautua korvaamattomiksi, kun CSS-ominaisuudet eivät toimi oikein ja tarvitset vaihtoehdon.

Julkaisun jälkeen Internet Explorer 9 beta , saavutamme hieman lähemmäksi yhtenäistä Internet-kokemusta. Ainoa ongelma on niiden ihmisten määrä, jotka käyttävät vanhoja vanhoja selaimia kuin IE6 ja IE7, joilla on vakavia virheiden käsittely (virheellisten renderointimoottoreiden vuoksi) ja joskus vaativat ulkoisia tyylejä. Onneksi tuki on parantunut, ja Microsoft näyttää kääntävän asioita.

Sisällysluettelon lisääminen

Tämä vaihe on valinnainen, mutta mielestäni se on ihmeitä tyyliarkkejani. Voit tallentaa pöydän itse CSS-asiakirjan ulkopuolelle, mutta olen havainnut tämän olevan jonkin verran haitallista - varsinkin, koska kommenttien lisääminen on helppoa.

Tärkeimmät syyt sisällyttää sisällön taulukko tyylisi mukaan ovat se, että se helpottaa pääsyä ja tehostaa muokkausprosessia. Laita markkereita asiakirjan alussa koodin erottamiseksi loogisiin jaksoihin.

CSS Table of Contents

Oman avaimen luominen on hyvä lähestymistapa. Jos esimerkiksi haluat jakaa taulukon asiakirjan pääalueiden mukaan (asettelu, kirjasin, otsikko, navigointi jne.), Voit näppäillä osiot, joissa on yksilöllisiä merkkejä.

Voisit käyttää =!layout ja =!font piirtää layout- ja fonttiosat vastaavasti. Luultavasti et käytä näitä tarkkoja merkkijonoja missä tahansa koodissa, joten lisäämällä ne sekä taulukkoon että kunkin kommenttiosan alkuun pitäisi olla turvallisia. Käytä sitten tekstieditorissa olevaa hakutoimintoa hypätäksesi haluamaasi kohtaan.

Tämä on myös hyvä strategia projekteille, joissa monet ihmiset katsovat koodia. Se pitää kaiken järjestäytyneen ja helposti saatavilla.

On monia tapoja optimoida koodia ja tehostaa sitä, ja nämä vinkit ovat hyvä alku. CSS on kehittymässä, ja siihen liittyy paljon uusia ideoita.

Tarvitset intohimoa ja omistautumista suunnittelualalle. Jos pystyt pitämään kiinni intohimosi digitaalisesta suunnittelusta, pysyä CSS: n parhaiden käytäntöjen kanssa ei pidä olla vaikeaa. Saavuttaminen muille tässä valtavassa web-suunnittelijoiden yhteisössä voi olla suuri apu; alan asiantuntijat ovat yleensä tyytyväisiä jakamaan tekniikkaansa ja innovaatioitaan.


Tämä viesti on kirjoitettu yksinomaan Webdesigner Depot by Jake Rocheleau , intohimoinen web-suunnittelija ja sosiaalisen median harrastaja. Jake rakastaa lukemista ja kirjoittamista viimeisimmistä digitaalisista ja Internet-trendeistä sekä verkkoyhteistyöstä design-yhteisön kanssa. Jos haluat kuulla enemmän hänen työstään, etsi hänet Twitterissä @ jakerocheleau .

Mitkä ovat menetelmät CSS: n tehostamiseksi? Kaikki ehdotukset aloitteleville CSS-kehittäjille? Mitä uusia ominaisuuksia tai lisätukea haluat nähdä tulevissa CSS-iteroinneissa?