Kuinka parantaa CSS: n kirjoittamista

CSS3

Älkäämme lyökö pensaasta: hienon CSS-koodin kirjoittaminen voi olla tuskallista.
Monet kehittäjät eivät halua kehittää CSS: ää. Voin tehdä kaiken mitä haluat, mutta ei! Ei CSS: tä.

Kun rakensin sovelluksia, CSS oli osa mitä en koskaan nauttinut. Mutta et pääse siitä, eikö niin? Tarkoitan, että olemme nykyään niin keskittyneet käyttökokemukseen ja suunnitteluun, ettemme osaa ohittaa sitä osaa.

Kun projekti aloitetaan, kaikki toimii hyvin. Sinulla on muutama CSS-valitsin: .title input #app, easy peasy.

Mutta kun sovelluksesi suurenee, se alkaa näyttää kauhealta. CSS-valitsijat ovat hämmentyneitä. Löydät itsesi kirjoittamassa esimerkiksi div # app .list li.item a. Kirjoitat saman koodin uudestaan ​​ja uudestaan. Heität kaikki koodisi tiedoston loppuun, koska et vain välitä, CSS imee. Ja siellä voit mennä: 500 riviä CSS: ää täysin käyttökelvoton.

Minulla on tänään tarkoitus: tehdä sinusta parempi kirjoittamaan CSS. Haluan sinun katselevan vanhempia projektiasi ja ajattelevasi: Voi poika, kuinka voisin koskaan kirjoittaa jotain tällaista?

Ok, saatat ajatella, sinulla on kohta. Entä CSS-kehykset? Se on mitä he edustavat, eikö niin? Näin kirjoitamme hyvän CSS-koodin.

Varma. Mutta on joitakin haittapuolia:

  • Se johtaa usein tavanomaiseen suunnitteluun.
  • CSS-kehysten mukauttaminen tai niiden ylittäminen voi olla vaikeaa.
  • Ne täytyy oppia ennen niiden käyttöä.

Ja loppujen lopuksi, laskeuduit tähän artikkeliin, ja siihen on syy, eikö niin? Joten ilman lisämieliataa, opitaan parantamaan CSS: ää.

Huomaa: Tämä ei ole artikkeli siitä, kuinka suunnitella kauniita sovelluksia. Sen tarkoituksena on oppia kirjoittamaan ylläpidettävä CSS-koodi ja järjestämään se.

SCSS

Käytän SCSS-esimerkkejäni.

SCSS on CSS-esiprosessori. Pohjimmiltaan se on CSS: n yläjoukko: se lisää hienoja ominaisuuksia, kuten muuttujia, pesimistä, tuontia ja yhdistelmiä.

Puhun siitä, mitä ominaisuuksia aiomme käyttää heti.

muuttujat

SCSS: llä voi olla muuttujia. Tärkein etu: uudelleenkäytettävyys. Oletetaan, että sovelluksessasi on värivalikoima. Päävärisi on sininen.

Joten laitat sinisen kaikkialle: painikkeen taustaväri, otsikon väri, linkit. SININEN KAIKKI.

Ja yhtäkkiä et pidä sinisestä. Pidät parempana vihreää.

  • Ilman muuttujia: vaihda kaikki rivit, joihin sininen väri asetetaan.
  • Muuttujien kanssa: muuta vain muuttujaa;)
// Ilmoita muuttuja
$ ensisijainen väri: # 0099ff;
// Viittaa muuttujaan
h1 {
  väri: $ ensisijainen väri;
}

Pesiä

Voit myös sijoittaa koodisi SCSS: llä. Joten tämä katkelma

h1 {
  kirjasinkoko: 5rem;
  väri: sininen;
}
h1 span {
  väri: vihreä;
}

voi tulla tämä:

h1 {
  kirjasinkoko: 5rem;
  väri: sininen;
  
  span {
    väri: vihreä;
  }
}

Paljon luettavissa, eikö niin? Vietät vähemmän aikaa monimutkaisten valitsimien kirjoittamiseen pesimällä.

Hiukkaset ja tuonti

Ylläpidettävyyden ja luettavuuden suhteen on mahdotonta pitää kaikkia koodeja yhdessä suuressa tiedostossa. Se sopii tarpeisiisi, kun kokeilet tai rakennat pientä sovellusta, mutta ammattitasolla… älä edes yritä. Meille onneksi SCSS antaa meille mahdollisuuden tehdä niin.

Voit luoda osittaisia ​​tiedostoja nimeämällä tiedoston johtavalla alaviivalla: _animations.scss, _base.scss, _variables.scss jne.

Tuonnin suhteen käytä hyvin @import-direktiiviä. Voit esimerkiksi tehdä tämän:

// _animations.scss
@ avainkehykset näkyvät {
  0% {
    opasiteetti: 0;
  }
  100% {
    opasiteetti: 1;
  }
}
// otsikko.scss
@import "animaatiot";
h1 {
  animaatio: näkyvät 0,5 sekuntia helposti;
}

Ah! saatat ajatella. Teit virheen täällä! Se on _animations.scss, ei animaatioita;)

Ei. SCSS on tarpeeksi fiksu tietääksesi, että puhut osittaisesta tiedostosta, kun nimeät niitä tällä tavalla.

Ja se on kaikki, mitä meidän on tiedettävä muuttujista, pesistä, osioista ja tuonnista. SCSS: llä on joitain lisäominaisuuksia, kuten sekoitukset, perintö ja muut direktiivit (@for, @if,…), mutta en käsittele niitä täällä.

Jos haluat tietää enemmän siitä, tarkista heidän asiakirjat. Ne ovat hyvin kirjoitettuja ja helposti ymmärrettäviä.

CSS-koodin järjestäminen: BEM-menetelmä

En muista, kuinka monta kertaa olen antanut kaikille termejä CSS-luokilleni. Tiedät: .painike .sivu-1 .sivu-2 .kohtainen syöttö.

Emme usein tiedä kuinka nimetä asioita. Ja silti se on tärkeää. Entä jos rakennat sovellusta ja päätit jostain syystä sivuuttaa sen muutaman kuukauden ajan? Tai pahempaa, mitä jos joku ottaa takaisin projektin? Jos CSS-koodiasi ei ole nimetty oikein, on vaikea tietää, mistä puhut yhdellä silmäyksellä.

BEM auttaa meitä ratkaisemaan tämän ongelman. BEM on nimeämiskäytäntö ja tarkoittaa Block Element Modifier.

Tämä menetelmä voi tehdä koodistamme jäsennellyn, modulaarisemman ja uudelleenkäytettävän. Selitetään nyt, mikä on lohko, elementti ja muuntaja.

lohkot

Ajattele lohkoa osana. Muistatko kun pelasit Legosta lapsena? Mennään ajassa taaksepäin.

Kuinka rakentaisit yksinkertaisen talon? Tarvitset ikkunan, katon, oven, joitain seiniä, ja se on se. No, nämä ovat meidän lohkomme. He ovat merkityksellisiä yksin.

Nimeäminen: lohkon nimi: .lohko
Esimerkkejä: .kortti, .muoto, .posti, .käyttäjänavigointi

elementit

Nyt miten rakentaisit ikkunan legojesi kanssa? No ehkä jotkut niistä näyttävät kehyksiltä, ​​ja kun koot neljä niistä, saat kauniin ikkunan. Ne ovat meidän elementtejä. Ne ovat lohkon osia, ja niitä tarvitaan lohkon rakentamiseksi. Mutta heidän ryhmästään, he ovat hyödytöntä.

Nimeäminen: lohkon nimi + __ + elementin nimi: .block__element
Esimerkkejä: .post__author, .post__date, .post__text

muokkaajia

Nyt kun olet rakentanut ikkunasi, saatat haluta vihreän tai pienen ikkunan. Niitä kutsutaan modifioijiksi. Ne ovat lippujen tai elementtien lippuja, ja niitä käytetään käyttäytymisen, ulkonäköjen jne. Muuttamiseen.

Nimeäminen: lohkon nimi TAI elementin nimi + - + modifikaattorin nimi: .block__element - modifier, .block - modifier
Esimerkkejä: .post - tärkeä, .post__btn - poistettu käytöstä

Jotkut muistiinpanot

  • Kun käytät BEM-nimeä, nimeät luokilla ja vain luokilla. Ei tunnuksia, ei tunnisteita. Vain luokat.
  • Lohkot / elementit voidaan upottaa muihin lohkoihin / elementteihin, mutta niiden on oltava täysin riippumattomia. Muista tämä sana: itsenäinen.
    Joten älä aseta marginaaleja painikkeelle, koska haluat, että ne sijoitetaan otsikon alle, muuten painike sidotaan otsikkoosi. Käytä sen sijaan hyödyllisyysluokkia.
  • Kyllä, HTML-tiedostosi ylikuormittuu, mutta älä huolestu - se on pieni haittapuoli verrattuna siihen, mitä BEM tuo sinulle.

Esimerkki

Tässä on harjoitus sinulle. Siirry suosikki- tai eniten käytettyihin verkkosivustoihisi ja yritä miettiä, mitkä olisivat lohkot, elementit ja muokkaimet.

Esimerkiksi tämän kuvittelin Google-kaupasta:

Sinun vuorosi. Ole utelias ja mieti, mitä ihmiset olisivat voineet tehdä paremmin. Kuten aina, sinun on etsittävä itse, kokeiltava ja luotava saadaksesi parempaa haluamaasi.

Kokoamalla se kaikki

Alla on esimerkkejä, jotka osoittavat BEM: n voiman.

CSS-tiedostojen järjestäminen: kuvio 7–1

Yhä kanssani? Loistava! Katsotaanpa nyt kuinka järjestää CSS-tiedostot. Tämä osa auttaa sinua olemaan tuottavampi ja anna sinun löytää heti missä sinun on muokattava CSS-koodiasi.

Ja niin teemme oppia 7–1-kuvion.

Saatat ajatella, että se ei näytä minusta millään.

Luota minuun, se on melko yksinkertaista. Sinun on noudatettava 2 sääntöä:

  1. Kirjoita kaikki osiosi 7 eri kansioon.
  2. Tuo ne kaikki yhteen main.scss-tiedostoon, joka sijaitsee juuritason tasolla. Ja siinä se on.

7 kansiota:

  • base: tänne, laita kaikki kattilalevykoodisi. Kattilalevyllä tarkoitan kaikkia CSS-koodeja, jotka kirjoitat joka kerta, kun aloitat uuden projektin. Esimerkiksi: typografiasäännöt, animaatiot, apuohjelmat (apuohjelmilla tarkoitan luokkia kuten marginaali-oikea-iso, teksti-keskus jne.) Ja niin edelleen.
  • komponentit: Nimi on tässä yksiselitteinen. Tämä kansio sisältää kaikki sivujen rakentamiseen käytettävät komponentit, kuten painikkeet, lomakkeet, swiperit, ponnahdusikkunat ja niin edelleen.
  • asettelu: käytetään sivun eri osien, ts. otsikon, alatunnisteen, navigoinnin, osion, oman ruudukon ja muiden asetteluun.
  • sivut: Joskus sinulla voi olla sivu, jolla on oma erityistyyli, joka erottuu tavalliseen tapaan. Laita sitten tyylisi sivukansioon.
  • teemat: Jos sovelluksessasi on erilaisia ​​teemoja (tumma tila, järjestelmänvalvoja jne.), aseta ne tähän kansioon.
  • tiivistelmät: Laita kaikki toimintosi tähän, muuttujat ja sekoitukset. Lyhyesti sanottuna, kaikki auttajasi.
  • myyjät: mikä olisi sovellus tai projekti ilman ulkoisia kirjastoja? Laita myyjät-kansioon kaikki tiedostot, jotka eivät ole riippuvaisia ​​sinusta. Voit lisätä Font Awesome-tiedostosi, Bootstrap-tiedoston ja muut vastaavat täällä.

Päätiedosto

Täältä voit tuoda kaikki osioksesi.

@ tuonti tiivistelmät / muuttujat;
@import tiivistelmät / toiminnot;
@import base / reset;
@import-pohja / typografia;
@import base / apuohjelmat;
@import komponentit / painike;
@import komponentit / muoto;
@import-komponentit / käyttäjän navigointi;
@import-asettelu / otsikko;
@import-asettelu / alatunniste;
...

Joo. Se näyttää ylivoimaiselta. Mutta tiesin, että ajattelisit sitä. Tämä arkkitehtuuri on mukautettu suurempiin projekteihin, mutta ei pieniin. Joten tässä on versio, joka on mukautettu pienempiin hankkeisiin.

Ensinnäkin, sinun ei tarvitse toimittajien kansiota. Laita vain kaikki ulkoinen CSS-koodisi otsikkoon asetettuun linkkitunnisteeseen. Sitten voit ohittaa teemat-kansion, koska sinulla on todennäköisesti vain yksi teema sovelluksellesi. Lopuksi, sinulla ei ole paljon erityisiä tyylejä sivuillesi, joten voit myös ohittaa sen. Hienoa, 4 kansiota jäljellä!

Sitten, sinulla on kaksi vaihtoehtoa:

  1. Haluat, että CSS-koodisi on järjestetty ja noudattaa 7–1-mallia, joten pidät tiivistelmät, komponentit, asettelut ja kansiot.
  2. Mieluummin sinulla on yksi iso kansio, johon laitat kaikki ositiedostot ja main.scss-tiedostosi, joten sinulla on jotain vastaavaa:
Sass /
  _animations.scss
  _base.scss
  _buttons.scss
  _header.scss
  ...
  _variables.scss
  main.scss

Se on sinusta kiinni.

Vakuutit minut! Mutta kuinka voin käyttää sitä? Tarkoitan, selaimet eivät tue scss-tiedostoja?

Hyvä saalis! Tämä on viimeinen askel, ja opimme koota SCSS CSS: ään heti.

SCSS: stä CSS: ään

Tätä varten tarvitset Node.js ja NPM (tai lanka).

Käytämme node-sass -nimistä pakettia, jonka avulla voimme koota .scss-tiedostot .css-tiedostoiksi.

Sen CLI (Command Line Interface) on melko helppo käyttää:

node-sass   [asetukset]

Siellä on useita vaihtoehtoja, mutta käytämme vain kahta:

  • -w: katsella hakemistoa tai tiedostoa. Se tarkoittaa, että solmu-sass odottaa muutoksia koodiin ja kun ne tapahtuvat, se kokoaa automaattisesti CSS: ään. Todella hyödyllinen kehitettäessä.
  • - output-style: mikä on CSS-tiedostosi tulos. Se voi olla yksi näistä arvoista: sisäkkäinen | laajennettu | kompakti | pakattu. Käytämme sitä CSS-tiedostojesi rakentamiseen.

Jos olet utelias henkilö (jonka toivon olevan sinun, kehittäjän tulisi olla utelias!), Mene tänne kaikki asiakirjat.

Nyt tiedämme, mitä työkaluja käytämme. Loppu on vielä yksinkertaisempaa. Seuraa vain näitä vaiheita:

  • Luo projekti: mkdir my-app & & cd my-app
  • Alusta se: npm init
  • Lisää node-sass-kirjasto: npm install node-sass --save-dev
  • Luo kansiosi, hakemisto.htmlsiirto main.scss-tiedostot:
kosketa index.html
mkdir -p sass / {tiivistelmät, alusta, komponentit, asettelu} css
cd sass && kosketa main.scss
  • Lisää nämä komentosarjat paketti.json-tiedostoon:
{
  ...
  "skriptit": {
    "watch": "node-sass sass / main.scss css / style.css -w",
    "build": "node-sass sass / main.scss css / style.css - output-style compressed"
  },
  ...
}
  • Lisää linkki, joka sisältää viittauksen käännettyyn CSS-tiedostoosi index.html-tiedostosi otsikkotunnisteeseen:


  
  
  
  
   Oma sovellus 

  

Oma sovellus

Ja siinä kaikki, olet valmis lähtemään! Suorita npm-kellonvalvonta, kun koodaat ja avaa index.html-tiedosto selaimessa. Jos haluat CSS: n pienenevän, suorita vain npm run build.

bonukset

Lisätään reaaliaikainen lataus

Voit lisätä live-uudelleenlatauksen olla entistä tuottavampi sen sijaan, että lataat paikallisen index.html-tiedostosi manuaalisesti.

Toista jälleen nämä yksinkertaiset vaiheet:

  • Asenna live-server-paketti: npm install -g live-server
    Huomaa: se on globaali paketti
  • Lisää npm-run-all projekti riippuvuuksiin: npm install npm-run-all --save-dev: se antaa meille mahdollisuuden suorittaa useita skriptejä samanaikaisesti.
  • Lisää nämä komentosarjat pakettiin.json:
{
  ...
  "skriptit": {
    "Käynnistä": "Npm-run-all - rinnakkainen elämänkello",
    "liveserver": "live-server",
    "watch": "node-sass sass / main.scss css / style.css -w",
  },
  ...
}

Nyt kun suoritat npm run start, voit nähdä muutokset heti koskettamatta mitään.

Autoprefixerin lisääminen

Asetimme kehitystyökalut, hienoa! Nyt puhutaan rakennustyökaluista ja erityisesti yhdestä: Automaattinen korjaus.
Se on työkalu (etenkin postcss-laajennus), joka jäsentää CSS: n ja lisää toimittajan etuliitteet CSS-sääntöihin käyttämällä Can I Use -arvoa.

Todellakin, kun rakennat verkkosivustoa, voit käyttää uusia ominaisuuksia, joita kaikki tukkumyyjät eivät tue täysin. Siksi toimittajan etuliitteet ovat ratkaisu näiden ominaisuuksien tuen lisäämiseen.

Tämä on esimerkki miltä se näyttää:

-webkit-animaation nimi: myAnimation;
-moz-animaation nimi: myAnimation;
-ms-animaation nimi: myAnimation;

Arvasit, se on työlästä kirjoittaa. Siksi tarvitsemme automaattisen korjausyksikön, jotta CSS-koodimme olisi yhteensopiva selainten kanssa lisäämättä ylimääräistä monimutkaisuuskerrosta.

Joten teemme kooditaidolla CSS: n rakentamiseksi on:

  1. Käännä kaikki SCSS-tiedostot yhdeksi CSS-päätiedostoksi.
  2. Etuliite CSS-tiedostoomme Autoprefixer.
  3. Pakkaa CSS-tiedostomme

Nämä ovat viimeiset vaiheet, joten ole kanssani, olet melkein valmis

  • Lisää kaksi riippuvuutta, postcss-cli ja autoprefixer: npm install autoprefixer postcss-cli --save-dev
  • Muokkaa rakennusohjelmaa ja lisää nämä komentosarjat pakettiin.json:
{
  ...
  "skriptit": {
    "Käynnistä": "Npm-run-all - rinnakkainen elämänkello",
    "liveserver": "live-server",
    "watch": "node-sass sass / main.scss css / style.css -w",
    "käännä": "node-sass sass / main.scss css / style.css",
    "etuliite": "postcss css / style.css --käytä automaattista korjausta -o css / style.css",
    "compress": "node-sass css / style.css css / style.css - output-style compressed",
    "build": "npm-run-all compile prefix compress"
  ...
}

Nyt kun suoritat suorituksen rakennuksen, CSS-koodisi on pakattu ja toimittajan etuliitteet on lisätty! Mahtavaa eikö olekin?

Mutta tiedätkö mikä on vieläkin mahtavampaa? Perustin repon sinulle vain siinä tapauksessa, että haluat nopeasti aloittaa

Aaaaaand, se on kaikki tänään! Nyt olet valmis kirjoittamaan ylläpidettävää, modulaarista ja uudelleenkäytettävää CSS-koodia.

Toivottavasti pidit tästä artikkelista. Jos on, voit antaa minulle palautetta kommentteihin.