Aiempia tyylioppaita pidetään yleensä suunnittelupainotteisina asiakirjoina, jotka keskittyvät tuotemerkkiin ja väriin. Mutta sellaisten sivustojen, kuten Facebookin tai Googlen laajan tuotevalikoiman, keksimättömästi suurten koodauskantojen myötä tyylisuunnat ovat kehittyneet.

Nykyään asumismuoto oppaat sisältävät ajantasaisen dokumentaation nykyisestä koodipohjasta ja sen käyttötavoista. Näiden asiakirjojen avulla voimme kirjoittaa paljon enemmän ylläpidettävää ja uudelleenkäytettävää koodia samalla kun näemme välittömästi, kuinka koodipohja on optimoitu.

Mikä on asumismuoto oppaassa?

Elämäntyylioppaat ovat samanlaisia ​​kuin vanhemmat kollegansa; ne sisältävät logon ja brändäysinformaation, värin käytön sekä yleiskuvan koodin käytöstä. Koodin ääriviivat -osiossa voit etsiä helposti kaksoiskappaleita tai vastaavanlaisia ​​koodeja ja yhdistää sen koodauksen optimointiin tai tarkastella jo käytössä olevia komponentteja. Useimmat oppaat joko esittelevät "log" tyyliä, jossa jokainen koodausesitys dokumentoidaan tai vain tahallisesti modulaarinen koodi dokumentoidaan.

Näissä oppaissa ei keskity vain HTML- ja CSS-versioihin, vaan myös muihin kieliin, jotka voidaan muokata suorituskyvyn, kuten JavaScriptin ja PHP: n kautta. Muutamia vankkoja esimerkkejä elävästä tyylioppaasta löytyy osoitteesta GitHub , mozilla , ja MailChimp . Kuten näistä esimerkeistä näkee, on yhteistä, että joko sivulle tai alasivustolle näytetään käyttökohtia rinnakkain kunkin komponentin koodin kanssa. Tämä helpottaa ja nappaa niitä, kun tarvitset niitä, ja tuntemattomat suunnittelijat tai kehittäjät voivat nähdä, miten osat toimivat vuorovaikutteisesti.

Aloita oma asumismuoto oppaan

Aloittamalla omaa asumismuotoasiakirjaasi tyhjästä saattaa tuntua pelottavalta, etenkin suurille projekteille. Mutta tyypillisesti on paluuta investoinnit aikaa tarvitaan saada se tehty. Suuremmat projektit hyötyvät äärimmäisen paljon sivuston tyyleistä ja koodirakenteesta. Pienemmissä projekteissa on vähemmän havaittavissa, mutta joskus silti kannattava, tuottoajastasi. Kummassakin tapauksessa, jos olet työskennellyt projektissa, joka voidaan luovuttaa jonnekin toiselle suunnittelijalle tai kehittäjälle, hän saa päivät nähdä tällaiset asiakirjat.

Aloita säätiö

Käyttämäsi komponentit ovat paras käyttötapa asumistyylioppaaseen, painikkeet tulevat mieleen heti. Lyhyt luettelo asioista, joita kannattaa harkita asiakirjojen tekemiseen, ovat layoutvaihtoehdot (mahdollisesti ristikkojärjestelmä), typografia, värin käyttö, painikkeet ja linkkityypit, lomakkeen muotoilu, ilmoitukset tai hälytykset ja listan muotoilu. Lähes kaikki, mitä hyötyä uudelleenkäytöstä voisi olla, voidaan lisätä olennaisesti. Muistatte, että pidät asioita joustavana, kun piirustat. Älkää koskaan muotoile hälytystä tai painikkeita, jotka liittyvät yhteen sivuun tai käyttötapaan, ellei se ole ehdottoman välttämätöntä. Sen sijaan lisää modifiointiluokkia, jotta voit rakentaa perustekijöitä, kuten väri, typografia tai esteettiset muutokset. Näin voit aina luottaa .button-luokkaan määrittämään johdonmukainen leveys, korkeus ja tekstin koko samalla kun modifiointiluokat voivat muuttaa asioita jokaiseen käyttökohtaan.

Kestävän koodin tavoitteet

Kestävän koodin tarkoitus on tehdä asiasta uudelleenkäytettäviä ja tulevaisuuden todisteita. Komponentit, kuten ilmoituspalkit, painikkeet, otsikot ja alatunnisteet, ovat erinomaisia ​​esimerkkejä uudelleenkäytettävistä koodeista - asioista, joita voit käyttää useita kertoja eri sivuilla tai samalta sivulta. Jos rikkoo vanhaa tai jo kirjoitettua koodia alas, jotta se olisi ylläpidettävämpää sen jälkeen, se on itse asiassa melko yksinkertainen. Aloita poistamalla CSS alas perusasiat. Sinun pitäisi jättää komponenttiluokka, joka määrittelee rakenteelliset asiat, kuten korkeus, leveys ja sijainti. Vaikka muita modifiointiluokkia voidaan käyttää vaihtamalla esteettisiä asioita, kuten väri tai typografia. Lisäksi, jos projekti käyttää jokaisen sivun rungon tunnusta tai luokkaa, voit muotoilla ainutlaatuisia käyttötapoja tällä sivulla per sivuilla. Muista kuitenkin turvautua tähän käytäntöön liikaa, sillä se voi helposti lisätä painoa tyyliohjeeseesi.

KISS Principle KISS-periaate on suunnitteluperiaate, joka soveltuu hyvin modulaariseen kehitystyöhön. Yksinkertaisen, ylläpidettävän koodin kirjoittaminen on yleensä helpointa pitämällä komponentit yksinkertaisina. Yksinkertaisuuden vuoksi, jos on mahdollista tehdä asioista tehokkaampia ja / tai käyttää vähemmän koodia samaan tulokseen pääsemiseksi, meidän komponentit olisi kirjoitettava tekemään niin. Jotta ylläpidettävän koodirakenteen päämäärät ovat, on oltava jotain uudelleenkäytettävää, pienikokoista ja paljon tehokkaampaa kuin ei-ylläpitävä vastapuoli.

Nimeämiskäytännöt CSS: ssä

Kun on kyse ylläpitävästä koodirakenteesta, nimeämiskäytännöt tulevat erittäin tärkeiksi. Kuvailevien CSS-luokkien kirjoittaminen vie kauan, jotta koodipohjan ylläpitäminen on helppo tehtävä. On ei rajoitusta CSS-luokan pituus, joten käytä tätä etusi. Varmista kuitenkin, että pidät kiinni selkeästä nimeämiskäytännöstä, sillä sekoitusviivojen tai alaviivojen tai kamelirannan suhteen kaikki pienet kirjaimet voivat helposti saada sekaannusta. Usein on hyvä idea tehdä osaamisluokasi hyvin kuvailevaksi, samalla kun modifiointiluokkia muutetaan vähemmän. Alla on esimerkki painikkeesta, ainutkertaisesta käyttökohtaisesta sääntöstä ja modifiointiluokista.

  / * Tämä on komponenttiluokka, siinä pitäisi olla vain perusrakenteellisia sääntöjä * /. Button {display: block; width: 250px; height: 48px; line-height: 48px;} / kotisivulla * /. homepage-cta-painike {display: blockmargin: 0 auto 50px; leveys: 180px; korkeus: 60px; line-height: 60px;} / * Alla ovat modifiointiluokat, luokka värien tai muiden esteettisten muutosten lisäämiseksi * /. punainen {tausta: # C54F48} ympäröivä {raja-säde: 5px;} 

Automaattiset ratkaisut

Automaattiset tyylisuunnitelma-generaattorit ovat alkaneet siirtyä vasemmalle ja oikealle auttamaan työntymistä tyyliohjeisiin. Tyyli prototyyppi on SASS-generaattori, jonka ovat rakentaneet Ram Richard ja Mason Wendell Team SASS . Se on yksi nykyisistä paremmista vaihtoehdoista, samankaltaisten generaattoreiden kanssa Hologrammi , Kalei , StyleDocco , ja KSS osoittautuu myös hyödylliseksi.

Automated vs. hand-crafted

Kuten aina, on olemassa etuja ja haittoja molempien menetelmien käyttämiseen täällä. Automaattiset ratkaisut ovat nopeita ja niitä voidaan käyttää sen jälkeen, mutta ne ovat myös joskus tiukkoja. Käsityönä tehdyt oppaat jättävät sinut tuntemaan kaiken insinöörin, mutta vie enemmän aikaa. Itse käsin muotoiltu lähestymistapa on minulle parhaiten useimmiten, koska se on joustavin suhteessa muiden kehittäjien kanssa. Mutta on varmasti syytä kokeilla joitain automatisoituja ratkaisuja vain saadaksesi käsityksen siitä, miten he työskentelevät ja mitä he sanovat koodistasi.

Tarkista koodisi

Verkkosivustot eivät ole koskaan valmiit. Muokkaamme asioita, siirrymme uuteen tyyliin ja suuntauksiin, ja loppujen lopuksi voimme päätyä paljon koodeista aiemmista tarkistuksista. On tärkeää ottaa hetki ja katsoa jokaisen version lopussa, jotta asiat ovat niin puhtaita kuin ne voivat olla. Tässä vaiheessa haluan myös heittää kukin komponentti (ja modifiointiluokat) a Codepen testi selaintuki ja muistiinpanoja vastaavasti. Tämä voi säästää useita kertoja myöhemmin, jos suunnittelet sivua, jolla on tukirajoituksia. Tarkastellessasi kannattaa myös pitää silmällä komponentteja, jotka voivat olla ristiriidassa toistensa kanssa epätottomilla tavoilla tai jotka aiheuttavat laatumallin ongelmia.

johtopäätös

Yhteenvetona tyylioppaiden pitäisi johtaa koodiin, joka on hyvin manipulatiivinen ja joustava, mutta silti helppo ylläpitää ja lukea. Kun otetaan huomioon, kuinka paljon aikaa meidän on investoitava tällaisen tuloksen saavuttamiseksi, asumismuotoisilla oppailla on paljon kvantitatiivisempi vaikutus suurempiin projekteihin kuin pienemmillä. Monimutkaiset tai suuret projektit hyötyvät niin paljon kaikesta optimoinnista ja suorituskyvystä, että se kannattaa aika, jonka nämä tavoitteet saavutetaan. Pienen verkkosivuston tai hankkeen elävän tyylin oppaan laatiminen ei välttämättä ansaitse riittävästi aikaa investointeihin.

Kaiken kaikkiaan meidän kaikkien pitäisi pyrkiä kirjoittamaan puhtaita, ylläpidettäviä koodeja, jotka keskittyvät tulevaisuuden vakiinnuttamiseen. Elämäntyylioppaat kannustavat tällaista työnkulkua ja avustajaa tekemään kehittäjille ja katsojille yhtä onnellisia.

Esitetty kuva / pikkukuva, ohjelmointikuva kautta Shutterstock.