15 vuoden kokemukseni mukaan verkkokehityksestä olen työskennellyt useiden yritysten kanssa, yritystason ja startupien välillä, ja olen työskennellyt monien muiden ohjelmistosuunnittelijoiden kanssa. Yksi yleisimmistä ja tärkeimmistä ongelmista, jonka olen kohdannut projekteissani, on ollut puhtaan ja helposti ymmärrettävän koodin kirjoittamisen epäonnistuminen .

Jopa parhaat kehittäjät huippuluokan yrityksiltä ei aina Noudata parhaita käytäntöjä ja kirjoita koodi, joka voidaan puhdistaa ja optimoida.

Sotkuisen ja likainen koodin seuraukset

Lainatakseni vanhaa mutta silti merkityksellistä blogikirjoitus, jossa keskustellaan puhtaan koodin periaatteista :

Lähdekoodi on samanlainen kuin rahoitusvelka. Oletetaan, että haluat ostaa talon asumiseksi. Useimmilla ihmisillä ei ole varoja maksaa käteistä talosta, joten otat sen sijaan asuntolainan. Kiinnitys itsessään ei kuitenkaan ole hieno asia. Se on vastuu. Sinun on maksettava velkasi korko kuukausittain ...

Niin myös verkkokehityksessä. Koodilla on jatkuvia kustannuksia. Sinun on ymmärrettävä se, sinun on ylläpidettävä sitä, sinun on mukautettava se uusiin tavoitteisiin ajan myötä. Mitä enemmän koodia sinulla on, sitä suuremmat juoksevat kustannukset ovat. Meidän etumme on saada mahdollisimman vähän lähdekoodia samalla, kun pystymme edelleen saavuttamaan liiketoimintatavoitteemme.

Mutta älkäämme viipykö abstraktissa. Tässä artikkelissa käsitellään olennaisia ​​puhtaan koodin periaatteita, erilaisia ​​tekniikoita, joita käytetään koodin järjestämisessä, ja kuinka tehdä siitä ylläpidettävämpi, skaalautuvampi ja helpompi virheenkorjaus.

Laatukoodi alkaa koodin perustyylillä, joka laajenee parhaisiin käytäntöihin, kun kirjoitetaan suuria sovelluksia HTML / CSS: ssä, jossa on useita uudelleenkäytettäviä lohkoja, ja keskustelemme myös nimityskäytännöistä, joilla luodaan parempi implisiittinen luettavuus, sekä kolmansien osapuolten kehyksistä ja niiden parhaista käytännöistä.

Siihen mennessä, kun olet lukenut tämän, sinun on ymmärrettävä laatukoodin perusteet ja miten HTML- ja CSS-koodisi on helpompi ylläpitää ja laajentaa.

Koodin muotoilun perusteet

Aloitetaan hyvän HTML- ja CSS-koodin perusteista: W3C-kelvollisuus, nimeämiskäytännöt, tiedostorakenne ja niin edelleen.

Ole tietoinen rakenteesta alusta alkaen.

Jos aiot kehittää suuren sovelluksen, sinun on huolehdittava tiedostorakenteesta. Se voi tai pikemminkin pitäisi näyttää tältä:

Käytä vahvistimia tarkistaaksesi koodisi.

Yritä aina käyttää HTML ja CSS validoijat.

Väärä koodi:

Expand details

All content goes here

p { font: 400 inherit/1.125 serif; }

Hyvä koodi:

Expand details

All content goes here

p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

Käytä vaihtoehtoista tekstiä -sivulla Tunnisteet puhtaan koodin periaatteiden voimassaoloon.

Tällä attribuutilla on tärkeä rooli hakukoneoptimoinnissa, hakukoneissa, indeksoijissa, näytönlukuohjelmissa jne.

Väärä koodi:

Hyvä koodi:

Käytä kebab-koteloa (selkärangan kotelo).

Nimiä varten yritä käyttää kebab-case (spinal-case) ja älä käytä camelCase tai under_score. Käytä under_score vain käytettäessä HYVÄ , mutta jos käytät Bootstrapia, on parempi pysyä johdonmukaisena ja mennä -: n kanssa erottajana.

Väärä koodi:

Semantics are important.

Bottom line: Opi ja käytä uusia elementtejä HTML5: ssä. Se on vaivan arvoinen!

CSS: Puhdista koodi ja esiprosessorit

CSS: n suhteen on vaikea olla aloittamatta epätavallisilla, mutta silkuttavilla neuvoilla:

Käytä CSS-esiprosessoria.

Sass on maailman kypsin, vakain ja tehokkain CSS-laajennuskieli.

Sassille on saatavana kaksi syntaksia. Ensimmäinen, joka tunnetaan nimellä SCSS (Sassy CSS) ja jota käytetään tässä viitteessä, on CSS: n syntaksin laajennus. Toinen ja vanhempi syntakse, joka tunnetaan sisennettynä syntaksina (tai joskus vain 'Sass'), tarjoaa suppeamman tavan kirjoittaa CSS: ää.

Ryhmittele valitsimesi: Käytä Sassissa @extend.

Ryhmittämällä valitsimesi tai käyttämällä @extend SASSissa sinun tulisi auttaa pitämään koodi kuivana (älä toista itseäsi).

Väärä koodi:

p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Hyvä koodi:

.font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

Käytä CSS: ssä rem-yksiköitä pikselien sijaan.

Käytä REM-kokoja ja väliä, esimerkiksi fontin kokoja, jotka se tekee font-size: n perusteella rootelementin. Niiden avulla voit myös skaalata koko projektin nopeasti muuttamalla juurikirjasinkokoa (esimerkiksi tietyllä mediakyselyllä / näyttökoolla).

Kirjoitat vähemmän koodia reagoiville näkymille:

Väärä koodi:

p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

Hyvä koodi:

html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

Yritä välttää kiinteää korkeutta tai leveyttä CSS: ssä.

Yritä välttää kiinteää korkeutta tai leveyttä CSS: ssä. Korkeudet voidaan tuottaa siten, että sisäinen sisältö on + pehmusteet ja leveydet voidaan määrittää ruudukkojärjestelmällä (käytä sisäkkäistä ruudukkoa tarvittaessa).

Väärä koodi:

Let's Get In Touch!

---

Ready to start your next project with us?

#footer { height: 130px; }

Hyvä koodi:

Let's Get In Touch!

---

Ready to start your next project with us?

#footer { padding-top: 23px; padding-bottom: 47px; }

Varmista, että käytät ylätason kohdetta vain kerran SCSS: ssä.

Kun käytät CSS-esiprosessoria ja aiot kirjoittaa tyyliä mihin tahansa osioon, varmista, että käytät CSS: n pääkohdetta vain kerran ja sisällytät kaikki alielementit ja mediakyselyt sen sulkeisiin. Tämän avulla voit löytää ja muokata tärkein pääelementti helposti yhdessä paikassa, kun teet muutoksia tulevaisuudessa.

Väärä koodi:

.section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

Hyvä koodi:

.section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

Mieti, mitkä elementit vaikuttavat, ennen kuin kirjoitat CSS-säännön.

Ajattele aina, mitkä elementit vaikuttavat, ennen kuin kirjoitat mitään CSS-sääntöä. Jos muutokset eivät ole yleisiä, kirjoita säännöt siten, että ne vaikuttavat vain tiettyyn elementtiin eikä mitään muuta.

Väärä koodi:

/* Commonly used class */ .title { color: #008000; }

Hyvä koodi:

/* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

Yritä etsiä olemassa olevia CSS-sääntöjä ja muuttujia ennen uusien kirjoittamista.

Etsi aina olemassa olevia sääntöjä, jotka sopivat haluttuun tyyliin, sekä mukautetussa CSS: ssä että kehyksessä. Vain jos ei ole mitään riittävää, jatka uuden kirjoittamista.

Tämä on erityisen tärkeää, kun työskentelet suurten sovellusten kanssa.

Väärä koodi:

.jumbotron { margin-bottom: 20px; }

Hyvä koodi:

// change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

Käytä erityisiä sääntöjä.

Jos taustalla on yksi ominaisuus, määritämme sen, mutta jos sillä on erilaiset taustaominaisuudet, voimme antaa sille yhden ilmoituksen.

Väärä koodi:

.selector { background: #fff; }

Hyvä koodi:

.selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

Käytä lyhenteen ominaisuuksia ja arvoja.

Tee parhaansa käyttääksesi enemmän lyhytominaisuuksia ja -arvoja. Lyhytominaisuuden avulla voit kirjoittaa ytimekkäästi ja usein lukukelpoisempia tyylitaulukoita, mikä säästää arvokasta aikaa ja energiaa.

Väärä koodi:

img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

Hyvä koodi:

img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don’t play with shorthand too much */ padding-left: 20px; }

Käytä em px: n sijaan linjan korkeudelle.

Käyttämällä em ja px Yksiköt antavat meille joustavuutta suunnittelussa ja kyvyn skaalata elementtejä ylös ja alas sen sijaan, että juuttuisimme kiinteisiin kooihin. Voimme käyttää tätä joustavuutta tehdäksemme malleistamme helpommin sopeutuvia kehityksen aikana ja reagoivampia. Lisäksi voimme antaa selaimen käyttäjille mahdollisuuden hallita sivustojen kokonaislukua parhaan luettavuuden takaamiseksi.

Väärä koodi:

p { font-size: 12px; line-height: 24px; }

Hyvä koodi:

p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

Käytä Bootstrap-luokkia niin paljon kuin mahdollista.

Vaikka tätä sääntöä voitaisiin soveltaa käyttöliittymäkehyksiin yleensä, käytän Bootstrap esimerkkinä, koska se on maailman suosituin käyttöliittymäkomponenttikirjasto.

Bootstrap antaa sinun käyttää paljon valmiita luokkia, mikä helpottaa työskentelyäsi. Yritä käyttää Bootstrap-luokkia niin paljon kuin mahdollista, jotta voit tehdä enemmän HTML-pohjaisia ​​merkintöjä.

Väärä koodi:

Lorem ipsum dolor sit amet, ut ius delenit facilisis Lorem ipsum dolor sit amet, ut ius delenit facilisis .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

Hyvä koodi:

Lorem ipsum dolor sit amet, ut ius delenit facilisis Lorem ipsum dolor sit amet, ut ius delenit facilisis

Muokkaa kehystä oikein.

Bootstrap luottaa muuttujat.scss tiedosto, jonka avulla voit helposti määrittää ja mukauttaa käyttöliittymää kirjoittamatta yhtä riviä koodia. Muussa tapauksessa, jos aiot kirjoittaa kaikki muokkaukset itse, sinun on parempi olla käyttämättä kehystä ollenkaan.

Jotkut kehittäjät välttävät muuttujien.scss muuttamista ajattelemalla, että he pystyvät silti päivittämään Bootstrapin uuteen versioon ilman suurta vaivaa, mutta se voi olla ikävä tehtävä. Jopa pienet päivitykset vaativat kehittäjiä lukemaan muutoslokin, käymään läpi kaikki merkinnät ja CSS: n ja siirtymään uuteen versioon manuaalisesti.

Väärä koodi:

navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

Hyvä koodi:

$navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

Älä korvaa .container leveys.

Yritä olla korvaamatta .container: n leveyttä. Yritä käyttää sen sijaan ruudukkojärjestelmää tai muuta vain säiliön leveyttä kohdassa _variables.scss. Jos haluat pienentää sen leveyttä, käytä vain max-width leveyden sijaan. Tällöin .container Bootstrapista pysyy koskemattomana reagoivissa näkymissä.

Väärä koodi:

.container { @media (min-width: $screen-lg-min) { width: 1300px; } }

Hyvä koodi:

// change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

Käytä Bootstrap 4 -luokkia ja kirjoita vähemmän CSS: ää.

Aloita Bootstrap 4: n käyttö, vaikka se on beetaversiossa. Se sisältää monia uusia luokkia, jotka auttavat sinua luomaan asetteluja nopeammin, erityisesti Flexbox ja välikkeet.

Väärä koodi:

Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

Hyvä koodi:

• Flex item 1
• Flex item 2
• Flex item 3

• Flex item 1
• Flex item 2
• Flex item 3

Nyt voimme määrittää luokat elementille kaikkien reunojen tai joidenkin rajojen poistamiseksi.

Väärä koodi:

border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

Hyvä koodi:

.border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

Käytä .col-sm-X jos .col-md-X ja .col-lg-X on sama arvo X: lle.

Älä kirjoita .col-md-X ja .col-lg-X jos .col-sm-X on sama arvo X: lle. Esimerkiksi ei tarvitse kirjoittaa .col-lg-10 koska kun kirjoitamme .col-md-10, sisällytämme automaattisesti .col-lg-10 sen sisällä.

Väärä koodi:

Hyvä koodi:

Älä käytä .col-xs-12.

Älä käytä .col-xs-12 koska jos ei .col-xs-X on määritetty, niin se on .col-xs-12 oletuksena.

Väärä koodi:

Services

Lorem ipsum dolor sit amet consectetur.

E-Commerce

Lorem ipsum dolor sit amet, consectetur adipisicing.

Hyvä koodi:

Services

Lorem ipsum dolor sit amet consectetur.

E-Commerce

Lorem ipsum dolor sit amet, consectetur adipisicing.

Älä käytä reset.css; käytä normalize.css sen sijaan.

Jos käytät Bootstrapia, normalize.css on jo sisällytetty sinne, sitä ei tarvitse sisällyttää kahdesti.

Noudata ohjeita, vaikka ne eivät olisikaan paras käytäntö.

Johdonmukaisuuden vuoksi on parempi noudattaa aina aloittamiasi sääntöjä ja ohjeita (olipa kyse sitten nimeämisestä, koodityylistä tai tiedostorakenteesta)

Käärimistä

Toivon, että olet onnistunut ottamaan pois jotain hyödyllistä ja että ajattelet enemmän minimaalisen HTML- ja CSS-koodin kirjoittamisesta parhaiden käytäntöjen avulla.

Suurille yrityksille on melko vaikeaa ylläpitää isoja sovelluksia, kun koodia on sekaisin. Ja tietysti suurilla yrityksillä on rahaa maksaa hyvästä laadusta. Jos noudatat puhtaita koodausperiaatteita, parannat mahdollisuuksiasi saada hyvä työ. On myös syytä tuoda esiin freelance-näkökulma: ammattilaiset jongleeraavat useita projekteja ja asiakkaita on toimitettava puhdas koodi joka voidaan välittää muille kehittäjille hetkessä.

Toivon voivani laajentua kehittyneempiin aiheisiin tulevissa viesteissä, koska aion puhua koodausprosessin automatisoimisesta, Gulp / Grunt -tehtävien, Lintersin, Editorin laajennusten, koodia tuottavien työkalujen, tekoälytyökalujen, jotka kirjoittavat koodia sinun sijasta, käytöstä ja muista liittyvät aiheet.

Toivon, että tämä on ollut mielenkiintoinen ja informatiivinen luettu. Onnea koodausyrityksissäsi.

Perustietojen ymmärtäminen

Mikä on puhdas koodi?

Puhdas koodi on koodi, joka on helppo lukea ja ymmärtää sekä kehittäjän helppo ylläpitää ja muokata. Se tarkoittaa, että määritetyt nimet ovat merkityksellisiä, mutta eivät liian pitkiä. Mitään koodin osia ei pitäisi toistaa, ja melkein kaiken pitäisi olla johdonmukaista.

Kuinka kirjoittaa puhdas koodi?

'Älä toista itseäsi' (DRY), 'abstraktio' ja 'pidä yksinkertaisena, tyhmänä' (KISS) -periaatteet ovat hyödyllisiä parhaita käytäntöjä puhtaan koodin kirjoittamisessa. Johdonmukaisuus ja luettavuus olisi varmistettava, ja tyylin ohjeita ja käytäntöjä on noudatettava.