Miten optimoida CSS
Pienet ja järjestetyt CSS-tiedostojen säilyttäminen on erittäin tärkeää, varsinkin jos aiot käyttää sivustosi muokkaamista tulevaisuudessa (tai jos muut käyttävät koodia eli asiakkaita).
Onneksi on olemassa useita erilaisia tekniikoita, joita voidaan hyödyntää CSS-tiedostojen organisaation ja kokoonpanon helpottamiseksi, jotta ne tehostuvat.
Säännöllisempi CSS säästää aikaa ja stressiä pitkällä aikavälillä joten on tärkeää saada se oikein.
Ensinnäkin yhden tyylitaulukon pitäminen normaalisti nimeltään style.css on hyvä paikka aloittaa CSS: n organisaatiossa. Yhden tyylisivun ansiosta sivustosi enemmistö (jos ei kaikki) pitää kaiken yhdessä yhdessä paikassa, mikä tekee muokkausprosessista virtaviivaisemman.
Koodi tyylillä
Jotta CSS-tiedostoja voidaan tehostaa, on tärkeää aloittaa käyttämällä hyvä koodieditori, kuten TextWrangler Macissa tai Notepad ++ Windowsissa. Tällä on useita keskeisiä etuja. Sen lisäksi, että se on helppokäyttöinen, kuten TextWrangler-ohjelma, myös värikoodit koodin eri osiot, jotka auttavat koodauksen edistymisessä. Tämä on erittäin hyödyllinen varmistaaksesi, että jokainen määrittelemäsi tyyli on kirjoitettu oikein, koska tyyli ei muuta väriä, ellei TextWrangler tunnista CSS-tyyliä. Tabs on toinen hyvä ominaisuus TextWrangler, jonka avulla voit pitää useamman kuin yhden tiedoston kerrallaan, mikä helpottaa ristiintarkistusta.
Jotta CSS-tiedostoja voitaisiin edelleen tehostaa, on hyvä määrittää koko asettelu, jota käytetään kaikissa CSS-tyyppisivuillasi. Ehkä yleisimmin käytetty tekniikka on ID: n tai luokan määrittäminen (käyttäen # tai vastaavasti), sitten avointa suluetta (jota seuraa upposi uusi viiva muotoilun aloittamiseksi seuraavasti:
#header {width:500px;height:250px;}Seuraamalla tätä yleisesti käytettyä tekniikkaa tyylitietosi on organisoitua ja koodaa helpompaa. Seuraavia tekniikoita autetaan varmistamalla, että ulkoasu on johdonmukainen koko CSS-tiedostojasi.
Järjestele paikan mukaan
Jokaisella sivustolla käytettävien CSS-tunnusten ja luokkien määrä voi helposti saavuttaa suuren määrän, joten on tärkeää, että CSS-tyylitaulukko on hyvin järjestetty. Yksi erittäin hyödyllisistä tekniikoista on tilata henkilötodistuksesi ja luokkasi mukaan, missä ne näkyvät verkkosivustossa. Esimerkiksi; asettamalla otsakkeen CSS-muotoilua kohti tyylisivun yläosaa ja alatunnisteen muotoilua kohti pohjaa. Pidä tämä johdonmukainen kaikilla verkkosivustoilla, joita olet koodannut, aina kun avaat luodun tyylitaulukon, tiedät tarkalleen, mistä etsiä tyyliä, jota haluat muokata.
Jotta tyylisuunnittelua voitaisiin edelleen tukea, on syytä nimetä elementtejäsi ilmeiset nimet, kuten otsikko, alatunniste, sivupalkki, pää sisältö jne., Jonka avulla voit selvittää minkä tyyppiset tyylit viittaavat. Jos elementit vaihtavat tarkoitusta, varmista kuitenkin, että niiden nimet heijastavat muutoksia. koska sivun alareunassa oleva otsikko, jonka otsikko on, voi tulla hyvin sekava ja tekee tilauksesta sijainnin pelottavamman tehtävän.
CSS-kommentit
Tämä johtaa CSS-kommenttien käyttämiseen tyylitiheyksiisi. Vaikka sitä ei aina käytetä, CSS-kommentit ovat erittäin hyödyllisiä erottamaan tyylisivujen eri osat. Jos olet muotoillut tyylitiedostot otsikoihin liittyvillä tyyleillä ylhäältä päin ja päinvastoin, voit käyttää CSS-kommentteja merkitsemällä eri osioiden alku ja loppu, kuten otsikko ja alatunniste tai tärkeimmät sisältöelementit.
CSS-kommenttien käyttäminen on yksinkertaista. Missä tahansa tyylitiedostossa, aloita kommentti /* ja lopeta sitten kommentti */ . Keskeistä on, että selain ei jäsennä mitään kommentissa, oli se koodi tai teksti, mikä tekee CSS: n kommentit erittäin hyödylliseksi jättää muistiinpanoja ja kuvauksia, jotka liittyvät tyylisivujen eri osiin.
Ehkä vielä kaksi CSS-kommenttien käyttöä voisi jättää asiakkaillemme kommentteja, joten jos he haluavat tehdä lisää muokkauksia sivustoilleen, heillä on tulevaisuudessa ohjeet auttamaan. Myös samaa tunnusta tai luokkaa voi olla erilaisia tyylejä, joita haluat säilyttää mahdollisen käytön tai testauksen suhteen. Sen sijaan, että merkitsit tunnisteet ja luokat, joiden lopussa on 2, esim header2 , pysäyttämällä tämän tyylin jäsentämisestä, yksinkertaisesti kääri mitä olisi header2 sisään /* ja */ .
Sen lisäksi, että tyylitiedostosi on järjestäytynyt, koska "2-tekniikka" voi helposti tulla sotkuiseksi, tämä tekniikka auttaa myös luomaan eri versioita tyylistä tyylitiedostoon esteettömästi ja helpottamaan uudelleenjärjestelyä (kopioi ja liitä pikemminkin kuin numeroiden muuttaminen ja vanhan tyylin poistaminen).
Kuitenkin, vaikka CSS-kommentit ovat erittäin hyödyllisiä, on myös tärkeää pitää mielessä tyyliselosteen koko ja pituus ja tasapainottaa sen mukaisesti. Kommenteissa ei saa käyttää enemmän tilaa kuin todellinen CSS; niiden pitäisi olla lyhyitä ja tarkkoja. On myös tärkeää ottaa tämä huomioon erilaisissa versioissa. Tarvitsetko todella kaikki tyylisi tallennetut versiot? Voisitteko tallentaa kaksoiskappaleen tyylisivun muualla? Useilla tyylisuhteilla olevilla versiomuodoilla voi olla hämmentävää, joten vaihtoehtojen huomioiminen on tärkeää, kuten kaksoiskappaleiden tallentaminen.
Vältä päällekkäisyyksiä
Kun tyylitaulukko on jäsennelty helppokäyttöisellä tavalla, voidaan helposti valita tarpeettomat päällekkäisyykset tyylillä. CSS: n luonteen vuoksi henkilötodistukset ja luokkiot periytyvät automaattisesti muotoilultaan vanhemmiltaan, mikä poistaa tarpeen muotoilua tuplaamaan. Ehkä helpoin tekniikka on määritellä useita avaintyylejä tyylisivujen alussa. Yleisten tyylejen määrittäminen linkkien ja tekstin kannalta on hyödyllistä ja poistaa tarpeen määrittää jatkuvasti muotoja jokaiselle tunnukselle ja luokalle. Tämä on myös tehokas tapa ylläpitää yhtenäistä tyyliä verkkosivustolla, ja se vaikuttaa myönteisesti myös tyylitaulukon koon pienentämiseen.
Käyttämällä työkalua, kuten Google Chromen tarkastajaa, on mahdollista nähdä, mitkä tyylit ovat perineet ja mistä, mikä auttaa edelleen poistamaan tyylisivustosi toivottuja päällekkäisyyksiä.
Käytä mitä tarvitset
Jälkeen jatkaa CSS: n tehostamista ottaen huomioon toteuttamasi CSS-luokitukset. Pitääkö sinun käyttää niitä kaikkia? On helppoa saada kuljettaa pois ja määritellä luokat, joita et suoraan tarvita, mutta luulet, että voit tehdä tulevaisuudessa; Jotta CSS-tyylitaulukko rajoittuu, pienet ja järjestäytyneet käyttävät vain CSS-luokkia, jotka ovat erottamaton osa sivustosi toimintaa. Vain koodi mitä tarvitaan. Tämän saavuttamiseksi vältetään päällekkäiset tyylit, kuten mainittiin, ja muista poistaa käyttämättömät tyylit ja ne, jotka eivät ole enää relevantteja.
johtopäätös
Seuraamalla näitä yksinkertaisia tekniikoita on mahdollista luoda paremmin järjestettyjä ja pienempiä CSS-tiedostoja, jotka on helppo navigoida ja muokata sekä nyt että tulevaisuudessa itsellesi ja asiakkaillesi.
Onko sinulla hyviä vinkkejä pitämään CSS: nne organisoituna ja virtaviivaisena? Kerro meille kommentit!