CSS n optimointi koodityylioppaiden avulla

Kun suunnittelijat puhuvat tyylioppaista, ne yleensä tarkoittavat sovittu käsikirja on johdonmukainen ulkoasu verkkosivuston tai sovelluksen, jossa on hyvin suunniteltu värimaailma, typografia ja käyttöliittymä sitä käytetään koko projektissa.

Web-kehityksessä voidaan käyttää myös toisenlaisia ​​tyylioppaita, ja se on yhtä tärkeää, mutta paljon harvemmin käsitelty: tyylioppaat itse koodille. Koodityylioppaat ovat pikemminkin kehittäjille kuin suunnittelijoille, ja niiden päätavoitteena on optimoida CSS tai muu koodi.

Oikean koodityylin oppaiden käyttöönotto antaa meille a parempi organisoitu, johdonmukainen koodikanta, parannettu koodin luettavuus ja ylläpidettävämpi koodi. Ei ole sattumaa, että suuret teknologiayritykset, kuten Google, AirBnB tai Dropbox, käyttävät niitä hyvissä ajoin.

Tässä viestissä tarkastelemme, miten voimme optimoida CSS: ää CSS-koodityylioppaiden avulla.

Koodityylioppaat vs. kuvion kirjastot

Teollisuudessa on tietty epävarmuus siitä, mitä voimme kutsua tyylisuuntaajaksi. Luettelon lisäksi esimerkiksi käyttää sitä synonyyminä termiin kuvion kirjasto tässä artikkelissa, mutta voimme törmätä tällaiseen määritelmään myös muissa tehtävissä.

Toisaalta on myös julkaisuja, kuten CSS Tricks tai Brad Frostin blogi, jotka erottavat koodityylioppaat mallikirjastoista. Tämä jälkimmäinen lähestymistapa vie meidät lähemmäksi hyvin optimoitua verkkosivustoa, kuten sen avulla voimme käsitellä koodia ja suunnittelua erikseen, joten käytämme tätä tässä viestissä.

Sekä koodityylioppaat että kuvakirjastot sisältävät muotoilustrategian, mutta erilaista. Mallikirjastot, kuten Bootstrap, Zurb Foundation, BBC: n Global Experience Language tai MailChimpin kuvakirjasto, tarjoavat meille käyttöliittymän, jossa on ennätykselliset CSS-luokat, typografia, värimaailma, joskus grid-järjestelmä ja muut suunnittelumallit.

CSS-koodityylioppaat, kuten Evernoten tai ThinkUpin (tai introissa mainitut), sisältävät säännöt CSS: n kirjoittamisesta mukaan lukien asiat nimityskäytännöt, tiedostorakenne, omaisuusjärjestys, koodin muotoilu, ja muut.

Huomaa, että elävän tyylin ohjaingeneraattorit, kuten KSS, Styledown tai Pattern Lab, luo kuvakirjastoja ja ei koodaustyylioppaat. Vaikka kuvakirjastot ovat myös erittäin hyödyllisiä ja nostavat web-kehitysprosessia, ne eivät salli koodin optimointia.

Rakenna CSS-koodityylioppaasi

CSS-koodityylioppaiden lopullinen tavoite on varmistaa, että voimme työskennellä johdonmukaisella ja helposti debuggoituvalla koodikannalla, jonka ovat laatineet kehittäjät, jotka kaikki noudattavat samoja koodin muotoilusääntöjä. CSS-koodityyliluettelon luominen voi viedä vähän aikaa, mutta se on vaivan arvoista, sillä meidän on tehtävä se vain kerran. Sitten voimme käyttää samaa tyyliopasta eri projekteissa.

On tärkeää huomata, että parhaat tyylioppaat eivät sisällä vain tyylisääntöjä, vaan myös esimerkkejä hyvä ja huono käyttö, sillä näin kehittäjät voivat paremmin ymmärtää sääntöjä.

Esimerkiksi AirBnB näyttää hyviä ja huonoja esimerkkejä kehittäjille seuraavalla helposti sulavalla tavalla:

Tiedoston rakenne

Ensinnäkin meidän on selvitettävä logiikka, jonka mukaan järjestämme CSS-tiedostomme. Pienempien projektien kohdalla yksi CSS-tiedosto voi riittää, mutta suuremmille hankkeille aina parempi rikkoa koodi, ja liittää erilliset tiedostot myöhemmin tuotantoon.

Jotkin tyylioppaat, kuten ThinkUp's, varoittavat myös meistä ei käytä sisäisiä tai upotettuja tyylejä ellei se ole väistämätöntä; se on myös hyödyllinen sääntö, jota kannattaa soveltaa.

Pesiä

Pesiminen on CSS: n suuri ominaisuus, mutta joskus se voi ohittaa. Kukaan ei tunne erityisen onnellista, varsinkin turhauttavan virheenkorjausprosessin keskellä.

 .class_1 .class_2 # id_1 # id_2 li a span väri: #bad; 

Joten se on aina hyvä perustaa kohtuullinen pesäraja, esimerkiksi GitHub valitsi tyylioppaassaan kolme tasoa. Rajoittamalla pesimistä voimme myös pakottaa itsemme kirjoittamaan paremman strukturoidun koodin.

Nimeämissäännöt

Yhdenmukaisten nimeämissääntöjen käyttäminen CSS-valitsijoille on ratkaisevan tärkeää, jos haluamme ymmärtää koodikuukausia tai jopa vuosia myöhemmin. On olemassa monia ratkaisuja, ja meidän on noudatettava vain yhtä tiukkaa sääntöä eli valintanimi ei voi alkaa numerolla.

Valitsimen nimeämisessä käytetyt neljä yleistä tyyliä ovat .pieniä, .under_scores, .kojelautaan es, ja .lowerCamelCase. On hyvä valita jokin niistä, mutta meidän on noudatettava samaa logiikkaa koko projektissa.

käyttämällä vain semanttinen valintanimi on myös välttämätöntä, jos haluamme sinulla on merkityksellinen koodi. Esimerkiksi .red-painike (joka ei näytä mitä painike tekee) on parempi käyttää .hälytys-painiketta nimi (joka kertoo, mitä se tekee), tällä tavoin kehittäjät (ja tulevaisuutemme) pystyvät ymmärtämään, mitä mainittu painike tekee.

Lisäksi jos haluamme muuttaa sen väriä punaisesta jotain muuta tulevaisuudessa, voimme helposti tehdä sen ilman vaivaa. Lisäksi on olemassa ennalta määrättyjä CSS-nimeämissopimuksia, kuten BEM (Block, Element, Modifier) ​​-sopimus johtaa johdonmukaiseen nimeämisrakenteeseen ainutlaatuisia ja mielekkäitä nimiä.

Muotoilusäännöt

Koodin muotoilu sisältää esimerkiksi välilyönnin, välilehtien, sisennyksen, välilyönnin, rivinvaihtojen jne. Käyttöä. Alustamisessa ei oikeastaan ​​ole yleisesti hyvää tai huonoa menetelmää. valita yhtenäiset säännöt, jotka johtavat luettavaan koodiin, ja seuraa niitä.

Esimerkiksi Dropbox vaatii, että kehittäjät asettavat tilakohtaisesti tilat omistusilmoituksiin, kun taas Evernote käyttää kahta välilyöntiä syvennykseen. Voimme asettaa niin monta muotoilusääntöä kuin olemme tyytyväisiä, mutta koskaan enempää kuin on mahdollista ymmärtää.

Ilmoitusjärjestys

Tilatut asiat ovat aina helpompia nähdä, ja CSS-ilmoitusten tilaaminen (ominaisuudet, joiden arvot ovat) säännön mukaan, joka on järkevää, johtaa parempaan järjestettyyn koodiin.

Katsokaa esimerkiksi WordPressin kiinteistöjen tilaussääntöjä, se määrittelee seuraavan yksinkertaisen mutta loogisen perusviivan tilaukseen, jossa ominaisuudet on ryhmitelty niiden merkityksen mukaan:

1. Näyttö
2. paikannus
3. Box-malli
4. Värit ja typografia
5. muut

Yksiköt ja arvot

Päättäminen siitä, miten haluamme käyttää yksiköitä ja arvoja, ei ole vain tärkeää johdonmukaisen koodin näyttämisen kannalta, mutta myös jos emme tee niin, saatamme päätyä jotain outoa

Kuvittele vain sivusto, joka käyttää vuorotellen px, em, ja rem pituuden mittaukset. Se ei näytä vain huonosti koodieditorissa, mutta todennäköisesti jotkin elementit ovat yllättävän pieniä tai suuria kyseisellä sivustolla.

Meidän on myös tehtävä päätöksiä väriarvoista (heksadesimaalinen, rgb tai hsl) ja haluamme käyttää lyhytominaisuuksia ja niiden sääntöjen mukaan. Jokaisessa CSS-koodityylioppaassa, johon olen törmännyt, sisältyy käsky, joka sisältää. älä määritä yksiköitä 0 arvolle (todella, älä vain).

.luokka // hyvä marginaali: 0; // huono marginaali: 0px; // huono marginaali: 0em; // huono marginaali: 0rem; 

kommentointi

Kommentointikoodi on välttämätön kaikilla kielillä, mutta CSS: ssä se ei ainoastaan ​​helpota virheenkorjausta ja dokumentoinnin tekemistä, vaan myös osaa CSS-säännöt loogisiin ryhmiin. Voimme käyttää joko / *… * / tai // ... merkinnän tyyli kommenteille CSS: ssä, on tärkeää pysy yhtenäisenä kommentteja koko projektissamme.

Esimerkiksi idioottinen CSS luo mielekkään kommentointijärjestelmän, joka käyttää jopa joitakin ASCII-perusperiaatteita ja johtaa kauniisti järjestettyyn koodiin: