Kaikkien puheiden viime aikoina lopulta voin käyttää CSS Grid, se sai minut ajattelemaan: Mitä muita hämmästyttäviä CSS-ominaisuuksia voin käyttää nyt? CSS-muuttujia oli se, joka heti miettii.
Oli vähän aikaa, koska olen kuullut CSS-muuttujista, ja se lisää kokonaan uuden työkalun ja ajattelutavan etupään kehittämiseen, joka innostaa minua.
CSS-muuttujat ovat koputtaneet muutaman vuoden ajan, mutta eivät näytä olevan laajassa käytössä. Edistyksellisten esiprosessoreiden kuten Sassin suosion ansiosta frontend-kehittäjät naarmuivat tämän muuttujan kutinaa jo kauan sitten.
CSS-muuttujien ensi kerran innoissaan noin vuonna 2014 ja siitä lähtien he ovat kurottautuneet kiinnostusalueelleni. Tarkastelen nyt vain niitä tuotantoalueille ja aion näyttää, kuinka yksinkertaisia ja helppoja he käyttävät.
Yksilöllisen omaisuuden ilmoittaminen on yksinkertaista: tarvitsemme vain haluamamme omaisuuden ja liitämme kaksi viivaa alkuun. Nämä voidaan julistaa missä tahansa, mutta lisäämällä niitä: juuri näyttää olevan hyvä lähestymistapa tällä hetkellä.
--my-reusable-value: 20px;Kiinteistön käyttö on melko yksinkertaista. Käytämme sitä var () -toiminnon kautta ja käytämme edellä ilmoitettua omaisuutta.
padding: var(--my-reusable-value);Eikö ole niin yksinkertaista ja kunniakas?
CSS-muuttujat ovat helppoja käyttää ja melko helppo muistaa. Suurin haaste CSS-muuttujilla (kuten useimmissa CSS-versioissa) on tietää oikea aika ja paikka käyttää niitä. Heitä heidät sattumanvaraisesti on varma tapa paloitella tyylejä sisältävän sekaannuksen ja nämä muuttujat, jotka heitetään virheenkorjaukseen, tulevat todennäköisesti vaikeiksi.
Olisi harkittava asianmukaisia käyttötapoja ja niiden käyttöä koskevia strategioita, ja tässä tapauksessa suurin osa yrityksistäsi olisi keskityttävä.
Seuraavassa esimerkissä aion näyttää sinulle perusesimerkin siitä, miten rakennan tällä hetkellä vastaavan komponentin Sass-muuttujien avulla. Sitten näytän sinulle, miten sitä voitaisiin parantaa CSS-muuttujien kanssa tavalla, joka ei ole mahdollista esisuoritimella. Tämä on erityinen käyttötapaus, jota ei sovelleta jokaiseen muuttuviin muuttujiin vaan on osoitettava, miten CSS-muuttujia voidaan käyttää eri tavoin.
Katso kynä CSS-muuttujat - reagoiva käyttötapa ilman CSS-muuttujia Adam Hughes ( @lostmybrain ) päällä CodePen .
Käyttämällä Sassia on muutamia erilaisia menetelmiä, joita olen kokeillut. Nykyinen versioani siirtää median kyselyjä CSS-lohkoihin, jotka haluan muuttaa. Täällä voin käyttää muuttujan, standardin CSS: n, mixinin tai laajennuksen muokkaamaan tätä elementtiä hajottamatta komponentin tyylit kaikkialle.
Yksi ongelma tässä on ottaa useita mediakyselyjä ja paljon muuttujia, jotka ovat eräänlaisia, mutta eivät. Voisin käyttää karttoja muuttujia varten, jotka antaisivat enemmän organisaatiota, mutta mielestäni tärkein asia on, että käytämme useita muuttujia yhden ominaisuuden määrittämiseen. Tämä vain tuntuu väärältä.
Sass-muuttujia käytetään etukäteen, mikä tarkoittaa, että meidän on suunniteltava, miten aiomme käyttää niitä. Ne tekevät kehityksestä helpompaa, mutta teknisesti eivät anna meille uusia supervaltoja.
Katso kynä CSS-muuttujat - reagoiva käyttötapaus Adam Hughes ( @lostmybrain ) päällä CodePen .
CSS-muuttujia ei tarvitse ilmoittaa eteenpäin, ne ovat dynaamisia. Tämä on hyödyllistä hyvin eri tavalla. Voimme nyt ehdollisesti muuttaa muuttujia mistä tahansa ja tietyissä konteksteissa, kuten mediakyselyissä.
Tarjoamalla mediakyselystyylit heti, kun voimme vähentää mediakyselyjen määrää hajallaan herkän muotoilun suhteen. Se antaa myös todella mukavan ja puhtaan tavan tarkastella yleistä välilyöntiä ja typografista muotoilua eri muodoissa.
Mielestäni reagoivat mallit ja teemalla ovat kaksi erinomaista käyttötapaa CSS-muuttujille, mutta on niin monia mahdollisuuksia.
Sass-muuttujia ja CSS-muuttujia ovat kaksi eri eläintä, joista jokaisella on omat ammattilaiset ja konsa.
Sassin suosion ja Sassin ohjelmoitavan luonteen takia syvällisemmät organisaatiomallit ovat kehittyneet ajan mittaan. Pidän erityisesti sass-karttoista ja yhdistelemällä samankaltaisia muuttujia karttoihin. Värien värit, koot ja pikanäppäimet näyttävät olevan suosittuja valintoja karttojen sisällyttämiseksi karttoihin.
CSS-muuttujien suhteellisen pienen käytön vuoksi parhaita käytäntöjä ei ole vielä kehittymässä. Kartat ja taulukot eivät ole samalla tavalla mahdollisia CSS: ssä, joten uusien organisaatiomallien tulee olla innovatiivisia ja ratkaista ongelmat eri tavalla kuin Sass.
Selaimen dynaamisesti käsittelevät CSS-muuttujia ajon aikana, kun taas Sass-muuttujia käytetään, kun CSS on koottu.
Tämä on CSS-muuttujien ydinmyyntipiste minulle. On mielenkiintoista nähdä, miten ihmiset käyttävät tätä ominaisuutta ajan mittaan ja pystyvätkö se täyttämään sen mahdollisuudet.
Olen henkilökohtaisesti sitä mieltä, että mitä enemmän asioita, joita voimme poistaa Webpackista , Gulpista ja mitä tahansa uudesta kehyksestä , on parempi. Mielenkiintoisilla uusilla selainominaisuuksilla tarkoitetaan, että meidän ei tarvitse luottaa kokoamiseen ja JavaScript-kehystoimintoihin, jotta asioijat, joita kehittäjät tuntevat, ovat välttämättömiä. Haluan vaarantaa, että suuri osa etusivun kehittäjistä käyttää CSS-muuttujiaan tavalla tai toisella, joten jokainen, joka käyttää tätä ydinominaisuutta, tuntuu järkevältä. Se tarkoittaa yhtä vähemmän rakennustyön vaiheessa (jonka uskoakseni kaikki voimme olla samaa mieltä, on melko voimakasta näinä päivinä) ja johdonmukaisuutta koko verkossa.
Tukee näkee huomattavaa hyvää yhdellä kirkkaalla poikkeuksella: IE 11. Nykyaikaisimmat selaimet tukevat CSS-muuttujia, joissa Edge on muutamia vikoja.
78,11%: ssa tämä on korkeampi kuin CSS Grid (kirjoitushetkellä), mutta IE11-tuki voi olla ongelma.
Mielestäni aika on nyt. Tämä IE11-tuki ei tule parempaan, ja tiedämme aikaisemmista Windows-versioista, että jotkut päivittävät aikaa. Mutta nykyisten selainten tuki on suuri, mikä tarkoittaa sitä, että meidän pitäisi etsiä CSS-muuttujia ja kokeilla mahdollisuuksia.
Tämä ei tarkoita sitä, että emme saa unohtaa vastuumme vanhempaan selaintatukeen. Olisi harkittava perusvarmennusjärjestelmää, jossa käytetään vanhempia selaimia tukitunnistetta tai jopa polyfillia, varsinkin jos varsinainen sivuston käyttö on paljon vinossa vanhemmille selaimille.
Se on jännittävä aika etupään kehittämiselle, ja en voi odottaa käyttävän enempää näistä tekniikoista tuotantosivustoillani.