CSS vs. JavaScript: Luottamus vs. hallinta

Kun GotoConf Amsterdam pyysi minua puhumaan, ajattelin, että se olisi toinen koneoppimis- tai Progressive Web Apps -keskustelu. Sen sijaan järjestäjät pyysivät minua kattamaan CSS: n. Aliedustettu kieli heidän ”ohjelmointikielensä” radalla. Nyt olen ollut CSS: n fani alusta alkaen. Arvelin, että ahkerassa kehityskonferenssissa ihmiset eivät ole yhtä innoissani. He eivät olisi olleet tarkastelleet CSS: ää yksityiskohtaisesti. Sen sijaan oletin, että se on enemmän välttämätöntä häirintää heille. Joten kirjoitin keskustelun siitä, mitä CSS: n käyttö tarkoittaa ja kuinka emme käytä sitä vahvuuksiinsa.

Tässä ovat keskusteluni muistiinpanot.

Tylsä taistelu

Toisena päivänä katselin uudelleen kapteeni Amerikka: sisällissodan. Ja jälleen kerran se tylsää minua, ja en saanut aivan ideaa siitä. Ajatus supersankarista, jotka on pakko olla vastuussa lisävahinkoistaan, ei ole uusi. Heidän hallinnan pyytäminen ei ole myöskään uusi. ”Uskomattomat” tekivät siitä hienoa työtä.

Minusta oli kyllästynyt lähtökohdaksi, jonka mukaan kaikki nämä hienot superkankarit taistelivat toisiaan vastaan. Tiedämme heidän voimansa. Tiedämme, että he ovat syvä ystäviä, jotka pelasivat toistensa hengen lukemattomiin kertomuksiin. Tiedämme, että heidän voimansa vastaavat toisiaan. Näissä kohtaamisissa ei ole väkivaltaa, ei todellista ajamista eikä vihaa. Tuntuu siltä, ​​että Marvel esitteli liian monta hienoa hahmoa ja yrittää nyt löytää tavan antaa ihmisille ottaa puolen. Myy lisää leluja, luo keinotekoista draamaa.

Saan saman kuvan, kun puhumme CSS: n tai JavaScriptin käytöstä asettelussa. Molemmilla on ansioita, molemmilla on valtuudet. Molemmilla on faneja, jotka ovat valmiita kaivaamaan yksityiskohtaisimmat tiedot puoltaakseen toisiaan. Mutta minusta tämä on tylsää. Molemmat yhdessä käytettiin verkkoa eteenpäin. Ja se pidättää meitä, että on olemassa kaksi massiivista leiriä. Toinen pää pitää CSS: tä menneisyytenä ja moduuliohjatussa maailmassamme meidän pitäisi tehdä kaikki komentosarjojen tilassa. Toinen näkee CSS: n ja sen esiprosessorit ja rakennuksen komentosarjat enemmän kuin tarpeeksi kaiken tekemiseksi. Muistatko DHTML-päiviä, jolloin teimme kaiken JavaScriptin avulla? Muistatko vain CSS-ratkaisut -vastauksen? Kun (ab) käytimme valintaruutuja monimutkaiselle interaktiivisuudelle JavaScriptin käytön välttämiseksi?

Giana Blantin antoi sen hienosti:

Voivatko nämä kaksi ryhmää:
 "CSS on niin helppo, ettei sitä edes koodata"
 "CSS on niin vaikea, meidän on korvattava se JS: llä!"
 Ole hyvä puhua keskenään?

Paljon CSS: n väärinkäsityksiä johtuu siitä, että kehittäjät eivät ymmärrä miten se eroaa ohjelmoinnista. Sen sijaan me vihailemme sen kanssa ja muutamme asioita. Hajottuaan jotain päättelemme, että se ei ole tarpeeksi hyvä ja meidän on korvattava se.

Usein tämä ylittää merkin. Aivan kuten OpenGL: n käyttämisessä yksinkertaiseen gradientin luomiseen, meidän ei tarvitse tuoda koko ajan esiin suuria aseita. CSS: llä on muutama temppu hihassaan, joita emme voi sovittaa asiakaspuolen komentosarjoihin. Sillä ei ole mitään tekemistä syntaksin tai kielitoimintojen kanssa. Kyse on vastuun jakamisesta.

Kuka on syyllinen ja kenen pitäisi olla suvaitsevainen?

CSS, aivan kuten HTML on vikasietoinen. Tämä voi olla hämmentävä. Se tarkoittaa, että loppukäyttäjien ei pitäisi kärsiä kehittäjän virheistä.

CSS: llä rakennetut tuotteet näkyvät edelleen, kun kehittäjä teki virheen. Ne eivät näytä täydellisiltä, ​​mutta toimivat. Kun CSS-jäsenijä kohtaa ominaisuuden, jota se ei ymmärrä, se ohittaa sen. Kun se havaitsee arvon, jota se ei voi käsitellä tai kiinteistö ei tue - se ohittaa sen. Tällä tavoin pysymme taaksepäin yhteensopivina.

Painike, jolla on taustaväri ja kaltevuus, näyttää värin vanhemmissa ympäristöissä. Se näyttää sen myös ympäristöissä, jotka eivät tue kaltevuuksia suorituskykyongelmien takia. Nopeampi, hifi- ja tukiympäristöt näyttävät kaltevuuden.

Sinun ei tarvitse tuntea ympäristöä eikä sinun tarvitse tehdä tätä päätöstä. Käyttöjärjestelmä, selain ja välityspalvelimet tekevät nämä päätökset puolestasi.

JavaScript ei ole vikasietoinen. Tämä voi olla tuhoisa. Sinulla on paljon enemmän hallintaa, kun käytät JavaScriptiä. Mutta olet myös paljon vastuullisempi.

JavaScripti asiakkaassa voi rikkoa kymmeniä syitä. Selain voi olla ei-tuettava, yhteys voi olla epämukava. Loppukäyttäjilläsi oleva matkaviestinpalvelujen tarjoaja saattaa nähdä sen tehtävänä pienentää ja pakata skriptejä, jotka menevät johdosta. Kun JavaScript kohtaa jotain, jota se ei ymmärrä - se rikkoutuu. Se pakataan eikä näytä mitään, rankaisemalla siten tuotteen käyttäjää virheistä. Tai niitä virheitä, joita muut ihmiset ja skriptit ovat ottaneet käyttöön, toimittavat koodisi loppukäyttäjille.

Toisin sanoen:

  • CSS - Käytät tyylejäsi ja toivot, että se toimi.
  • JavaScript - Sinä hallitset muotoilua, ja sinun on tarkistettava, että se toimi

CSS tarkoittaa Webin "houkuttelevuuden" omaksumista, kuten Brad Frost sanoi. Web ei ole kiinteä kangas, johon voit asettaa kuvapisteitä. Paljon asioita siinä ei ole sinun hallinnassasi:

  • Käyttäjien selaimet
  • Laitteiden resoluutio, pikselitiheys ja väriasetukset
  • Niiden yhteysvarmuus ja nopeus
  • Niiden yhteyden rajoittavuus - resurssien estäminen on asia
  • Niiden fonttikoko ja zoomaus tarvitsevat
  • Koneiden resurssien saatavuus tuotteellesi (onko keskusyksikkö jo palamassa?)
  • Tuotteen tekstisisällön ja kuvakoon määrä - CMS ketään?

Tämä voi olla pelottavaa, ja haluamme usein valvoa ympäristöä, jossa tuotteemme käyvät - jos vain järkkyyden vuoksi. Tämä tarkoittaa kuitenkin, että suljemme pois paljon potentiaalisia käyttäjiä.

Tässä tuntemattomassa ympäristössä meidän on päätettävä, kuka työskentelee suorittaakseen sen suoritusongelmat:

  • CSS - Selaimen tehtävänä on toimia hyvin, käyttää GPU-resursseja ja ohittaa toiminnot.
  • JavaScript - sinun tehtäväsi on testata tukea. Ja varmistaa, että renderointi, maalaus ja reflow on nopeaa. Ja pitämään animaatio synkronoituna.

CSS on siinä pirun hyvä, ja selaimen valmistajat panostavat paljon vaivaa rajapinnan suorituskyvyn mukauttamiseen.

Joten miksi aliarvioimme CSS: ää ja yliarvostamme JavaScriptin etuja? Luulen, että yksi syyllinen on klassikko - Internet Explorer.

CSS ja sen hankala historia

CSS: n piti kasvaa nopeasti eikä se saanut tukea selaimilta, että sen piti olla luotettava työkalu.

CSS oli aluksi hyvin rajallinen, ja se oli tarkoitettu visuaalisen HTML: n ja määritteiden korvaamiseksi. Aloittanut kaikki nämä fontit, bgcolor, kohdista, keskellä, HR ja ystävät. Hajanainen selaimen tuki ja erittäin omituiset virheet ilman virheenkorjausvaihtoehtoja eivät auttaneet sitä. Tiesimme, että asiat olivat väärin, mutta emme voineet tehdä asialle mitään. Emme edes voineet kysyä keneltäkään, koska selaimen valmistajilla ei ollut saatavana palautetta.

Kun iPhone tuli ulos, CSS: n päivä oli parrasvalossa. HTML5 on tulevaisuus -tarina vaati paljon lisätoimintoja. Kun Apple soitti laukauksia siellä ja standardisointi vei liian kauan, oli ”vain Webkit”.

Tämä tarkoitti etuliitteitä CSS: ssä ja jälleen haarukointia eri renderointimoottoreille. Selaimen valmistajat innovoivat ja osoittivat hallitsevaa asemaansa muihin nähden etuliitetyn toiminnallisuuden avulla. Kehittäjinä tämä tarkoitti toistoa ja joutumista valitsemaan tukisuunnitelma jokaiselle heistä. Ja tietysti yksi vanhempien, vanhentuneiden selainten tukemisesta. Nämä uudet selainsodat etuliitteiden ympärillä aiheuttivat paljon argumentteja ja sekaannusta.

Ja viimeisenä, mutta ei vähäisimpänä, CSS: ssä ei viime aikoihin asti ollut asettelumallia. Sen sijaan hakkeroimme käyttämällä paikannusta ja kelluvaa. Paikannus, etenkin absoluuttinen sijainti pikselissä, ei ole järkevää verkossa. Ihmiset voivat muuttaa fontin kokoa ja sisältö on päällekkäinen. Paikannus kelluvien kanssa vaatii tyhjennysosat.

Se, mitä kutsut luotettavaksi peruslinjaksi, ei ole helppotajuinen ymmärtää, jos et ole ”web-kotoinen”

Meidän piti saada CSS toimimaan riippumatta selaimen tuesta

Ratkaisumme oli korjata JavaScriptillä. Voimme lukea ehdot ja reagoida niihin luomalla HTML: ää ja soveltamalla muotoilua. Koska JavaScript on ohjelmointikieli, meillä on täysi määräysvalta tapahtuvaan. Meillä on ehdot, silmukat, vertailut - kaikki asiat, jotka ohjelmoija kaipaa CSS: ssä. Tämä on tietyssä määrin CSS: n käsitteen väärinkäsitys. Useita elementtejä vastaava valitsin on pohjimmiltaan silmukka. Voimme jopa käyttää: nth-child () kohdistaaksesi elementin kokoelmaan.

Yleensä CSS on mennyt harppauksin siitä lähtien, kun meidän piti käyttää JavaScriptiä sen korjaamiseen. Erityisen pettymys selaimen tukeen on paljon pienempi ongelma.

  • Evergreen-selaimet ovat asia - kaikki selaimet ovat jatkuvalla päivityspolulla. Opimme jopa selaimen valmistajilta, mikä on tulossa.
  • Selaimen työkalu antaa yksityiskohtaisen kuvan siitä, mitä CSS koskee mitä. Meillä on jopa visuaalisia työkaluja, kuten animaatioeditorit ja värinvalitsimet.
Visuaalinen editori CSS-animaatioille Firefox Developer -työkaluissa
  • Selainten CSS-tuki on dokumentoitu hyvin: caniuse.com on uskomaton resurssi. Se ei vain osoita mitä selainta ja mikä ympäristö tukee mitä. Se selittää myös toteutuksissa esiintyviä virheitä, tarjoaa linkkejä teknisiin tietoihin ja virheraportteihin. Sillä on jopa sovellusliittymä, joka upottaa nämä tiedot dokumentaatioon ja kehittäjätyökaluihin.
Käyttämällä Visual Studio -koodin laajennusta saat tietoja selaimen ominaisuuksien tuesta suoraan selaimessa. Opit kuka estät koodin tekemisen aikana.
  • Meillä on tukikanavat ja virheiden seuranta melkein kaikilla selaimilla. Jotkut jopa sallivat sinun tehdä virheen Twitterin avulla. Selaimen valmistajien joukkueet ovat aktiivisia sosiaalisessa mediassa ja tavoitettavissa.
  • Esikäsittelijät, kuten Sass ja Less, ovat ottaneet lämpöä innovoidakseen CSS-tekniikkaa nopeammin. Aivan kuten jQuery inspiroi tämän päivän JavaScriptiä, nämä johtavat toiminnallisuuteen, jota ihmiset haluavat.
  • Yhteisö käyttää paljon aikaa CSS: n ylläpidettävyyden parantamiseen. Niitä lähestymistapoja kuten Nicole Sullivanin kohdeorientoitu CSS ja Brad Frostin Atomic Design ovat olleet olemassa jo kauan, ja niiden pitäisi auttaa vähentämään monimutkaisuutta.

Mitä CSS voi tehdä sinulle

Tässä on joitain uskomattomia asioita, joita CSS voi tehdä nyt, ja sinun tulisi harkita käyttöä.

Lasketut CSS-arvot

Yksi asia, joka näytti puuttuvan CSS: stä, oli tapa laskea arvot. Klassinen esimerkki on ehdottomasti sijoitettu elementti, joka on 100% leveä, mutta tarvitsee pehmusteen. Aikaisemmin meidän piti tehdä se pesällä toinen elementti ja levittää pehmuste kyseiseen. Jo jonkin aikaa, vaikka voimme käyttää CSS calc () -sovellusta siihen ja soveltaa calc: n leveyttä (100% - 1em).

Laskelmia tuetaan erittäin hyvin kaikissa selaimissa. Niiden käytöstä ei pitäisi olla mitään taitoja.

Mediakyselyt

CSS-mediakyselyjen avulla voit reagoida asiakirjan näkymäportin muutoksiin. Pohjimmiltaan ne tarkoittavat, että käytät osaa tyylisivustasi, kun näkymä täyttää tietyt kriteerit. Tämä voi olla näkymä, joka on ainakin tietty leveys tai korkeintaan tietty korkeus. Voit myös tarkistaa näytön pysty- tai vaakasuunnan tai onko asiakirja tulostettu.
 CSS-mediakyselyillä on myös JavaScript yhtäsuuri matchMediossa. Tämän avulla voit ladata sisältöä tarpeen mukaan. Yksi mediakysely -ongelma on, että selaimet lataavat kuvia lohkoissa ottelusta riippumatta.

Luotu sisältö

Käyttämällä :: ennen ja :: pseudonvalitsimien avulla CSS: ssä voit luoda puhtaasti visuaalista sisältöä. Tämä on loistava tapa varmistaa, että kosmeettisista syistä johtuvat asiat eivät tarvitse omaa, tyhjää DIV-, SPAN-, B- tai I-elementtiä. Se on tapa pitää kaikki tyylisivulla ylläpidettävä visuaalinen skriptien tai HTML-asiakirjan sijasta. Voit yhdistää tämän varjojen, kaltevuuksien ja muiden visuaalisten CSS-ominaisuuksien kanssa. Vaikuttava esimerkki siitä on ”Single DIV”. Tällä verkkosivustolla on kymmeniä visuaalioita, jotka on luotu yhdestä DIV-elementistä.

Tämä grafiikka on luotu käyttämällä yhtä DIV-elementtiä

Animaatiot ja muutokset

Animaatiot ja CSS: n siirtymät olivat suuri läpimurto, kun iPhone tuli markkinoille. Siirtymisten avulla voit luoda sujuvan vaiheen tilasta toiseen. Sinun ei tarvitse tietää, mitä muutoksia tapahtuu. Kerrot vain selaimelle, kuinka kauan siirtyminen ja mitä keventämistoimintoa käytetään. Animaatiot antavat sinulle tarkemman hallinnan. Määrität avainruudut ja mitä tulisi animoida miten. Sekä Animaatiot että siirtymät palo-tapahtumia ennen, sen aikana ja jälkeen. Tämän avulla voit olla vuorovaikutuksessa JavaScriptin kanssa ennustettavalla tavalla. CSS: n käytön etuna on, että selain varmistaa animaation suorituskyvyn. Tämä tapahtuu ajamalla niitä GPU: lla ja kuristamalla kehyksenopeutta tarvittaessa. Tämä on tärkeä askel käyttäjien puhelimien hyvän akun varmistamiseksi. Jos animoit JavaScriptiä, se voi mennä pieleen.

Näyttöporttiyksiköt

Mediakyselyillä on järkeä, kun haluat määritellä kokemukset yksityiskohtaisesti. Sen sijaan voit käyttää myös näyttöporttiyksiköitä elementtien mitoittamiseen käytettävissä olevan tilan mukaan. Näkymäportin leveys (vw) on prosenttiosuus koko näyttöportin leveydestä. Joten 480px-laajakuvassa 10vw on 10% tai 48px. Tämä eroaa% -yksiköstä, joka on emoelementin prosenttiosuus eikä näyttökenttä. Sisäiset prosenttiosuudet pienenevät, vw ei. Näkymäportin korkeus (vh) on prosenttiosuus koko näyttöportin korkeudesta. Voit myös tehdä itsestäsi riippumattoman orientaatiostani käyttämällä vmin- ja vmax-ohjelmia. Nämä joko ottavat pienemmän tai suuremman vw: stä ja vh: stä. Ainoa näyttöporttiyksiköiden tuki on, että Edge ei tue tähän päivään mennessä vmin- ja vmax-tiedostoja.

CSS Tricks -lehdessä on hieno artikkeli siitä, kuinka tehokkaita näyttöporttiyksiköt voivat olla. Resoluutiosta riippumattomista upotuksista näyttöruudusta riippuvaiseen typografiaan voit käyttää näyttöporttiyksiköitä erittäin joustavien rajapintojen luomiseen.

flexboxiin

Flexbox on tapa luoda elementtien asettelu CSS: ään. Pohjimmiltaan se, että kaikki ihmiset, jotka väittivät asettelutaulukoita, puuttuivat helpommin CSS: stä - ja paljon muuta. Voit kohdistaa elementin alaelementit oikealle, vasemmalle, ylä- tai alaosaan. Voit määrittää ne täyttämään käytettävissä olevan tilan, jolloin jokaisella on joko sama määrä tai enemmän kuin muilla. Voit myös määrittää ne käyttämään käytettävissä olevaa tilaa toistensa välillä tai niiden ympärillä. Se on yhtä joustava kuin tina sanoo. Jos haluat saada visuaalisen editorin nähdäksesi mitä se tarkoittaa, Build With Reactilla on hieno flexbox-editori leikkiä varten.

Rakenna Reaktin flexbox-editorilla osoittaa elementtien asettamisen tehon tällä tekniikalla

On myös peli nimeltä Flexbox Froggy. Se opettaa käsitteet nautinnollisella ja helposti saavutettavalla tavalla ja on hienoa lapsille aloittaa CSS.

Suuri puhe Flexboxista on se, mitä Zoe Gillenwater antoi erilaisissa tapahtumissa. Pidän keskusteluista eniten siitä, kuinka Zoe näyttää kuinka he käyttivät Flexboxia tuotannossa. Esimerkit ovat peräisin booking.com-sivustolta, ja ne sisältävät varmuuskopioita selaimille, jotka eivät tue sitä.

CSS-ruudukko

Jos Flexbox on vastaus rivin tai sarakkeen asetteluelementeille, CSS-ruudukko vie sen seuraavalle tasolle. Sitä käyttämällä voit asettaa elementit määriteltyyn ruudukkoon kahdessa ulottuvuudessa, sekä rivit että sarakkeet. Grid on keittänyt jonkin aikaa, ja nyt sitä tuetaan vihdoin kaikkialla.

Ruudukko voi olla pelottava katsoa, ​​koska sen joustavuus tarkoittaa, että valita on paljon vaihtoehtoja. Ylivoimaisesti yksinkertaisin tapa aloittaa on Rachel Andrew'n ”Grid by Example” -resurssi. Tässä on copy + paste esimerkkejä ruudukkoasetteluista. Monissa heistä on varmuuskopioita ei-tuetuista selaimista. Koulutusvideot, jotka selittävät niiden hyvät ja hyvät puolet, tekevät siitä uskomattoman resurssin.

Jos opit paremmin haasteilla, voit tarttua CSS-ruudukkoon pelaamalla CSS-ruudukkoa.

CSS-verkkojen verkossa on joitain "täytyy nähdä" -puheita. Ensimmäinen niistä on ”CSS Grid Layout”, jälleen Rachel Andrew.

Jen Simmons suhtautuu eri tavalla. ”Oikea taidenohjaus verkkosivustossa” -tapahtumassa hän osoittaa, kuinka Gridin monipuolisuus voi auttaa meitä pääsemään eroon "laatikkosuunnittelumme" ajattelustamme.

Grid- ja Flexbox-sekoittamisessa ja sovittamisessa ei ole mitään ongelmaa. Se voi ja pitäisi käyttää Flexboxia soluissaan. Yhdessä näiden työkalujen avulla voit luoda joustavia asetteluja. Asettelut, jotka sallivat muuttuvan sisällön ja muutoksen sopimaan käytettävissä olevaan tilaan. Web-asettelut.

CSS-mukautetut ominaisuudet (muuttujat)

Yksi CSS: n vaadituimmista ominaisuuksista, joita esikäsittelijöillä, kuten Sass ja Less, oli ollut pitkään, ovat muuttujat. Nyt meillä on CSS-mukautetut ominaisuudet, jotka saavat minut innostumaan CSS: stä. Voit määrittää uudelleenkäytettävät asetukset kerran asiakirjassa ja soveltaa niitä kaikkialla. Yleisin käyttötapa tälle on mukautetut värit ja koot. Mutta voit mennä pidemmälle ja määritellä fontteja ja muuta typografiaa. Voit käyttää niitä myös laskennan laskemiseen CSS: ssä. Tämä ei ollut mahdollista ennen. Upea ominaisuus on, että mukautetut ominaisuudet voidaan asettaa dynaamisesti myös JavaScriptin avulla.

Kuinka lukea ja kirjoittaa mukautettuja CSS-ominaisuuksia JavaScriptin avulla - (katkelma Lea Veroun puheesta)

Jos haluat oppia kaiken CSS: n mukautettujen ominaisuuksien hämmästyttävästä voimasta, on puhetta, jota sinun ei tule unohtaa. Lea Veroun ”CSS-muuttujat: var (- tekstitys)” on aarteetieto.

CSS-ominaisuuskyselyt

Toinen erittäin tervetullut lisä CSS: ään oli Ominaisuuskyselyt. Nämä toimivat paljon kuin mediakyselyt. @Supports-sovelluksella voit tarkistaa, tukeeko nykyinen käyttäjäagentti tiettyä ominaisuutta. Tämän jälkeen määrität CSS-lohkon, jota sovelletaan vain, kun ominaisuustuki on käytettävissä. Tämä saattaa tuntua oudolta, koska CSS: n vikasietoisuuden tulisi jo huolehtia siitä. Mitä se tekee, antaa sinulle paljon yksityiskohtaisemman hallinnan. Sen avulla voit myös määrittää varaosan, kun tiettyä ominaisuutta ei tueta käyttämällä "ei" -sanaa.

CSS ja JavaScript?

CSS: n ja JavaScriptin yhteistyö on tehokasta ja oikein tehtävää. Sikäli kuin CSS on tullut, se ei silti voi tehdä kaikkea. On skenaarioita, joissa CSS: n luonne on ristiriidassa sen kanssa, jonka haluamme saavuttaa.

Kuten Cristiano Rastelli selittää aiheesta "Olkoon rauha CSS: ssä", "Huolenaiheiden erottamisen" vaalittu ominaisuus ei koske moduulimaailmaa.

Kun CSS: stä tuli asia, muutimme kaiken ulkoasun ja käytön HTML: stä CSS: ään ja JavaScriptiin. Määrittelemme joko asiakirjan tai jopa projektin laajuisesti. Juhlimme sitä, että CSS perii vanhemmilta elementeiltä. Kun rakennamme komponentteja, joita voidaan johdonmukaisesti käyttää uudelleen, emme halua sitä. Haluamme, että he pitävät ulkonäköään, tunteitaan ja käyttäytymistään vedettämättä vierekkäisiin tai perimään vanhemmiltaan.

CSS ja JavaScript toimivat yhdessä ei-komponenttiympäristössä

Dokumenttipohjaisia ​​ratkaisuja rakennettaessa ei ole mitään syytä olla käyttämättä CSS: n valtaa. Voit ja pitäisi käyttää JavaScriptiä tuodaksesi tietoja CSS, jota ei voi lukea CSS: ään. On kuitenkin järkevää tehdä niin vähiten häiritsevällä tavalla.

Hierarkia, jolla CSS ja JS toimivat yhdessä toisen kanssa tässä skenaariossa, ovat seuraavat:

  • Käytä CSS: ää, kun pystyt - käyttämällä täällä näkemiäsi asioita
  • Jos sinun on kommunikoitava CSS: n kanssa, harkitse mukautettujen ominaisuuksien muuttamista
  • Jos tämä ei ole vaihtoehto, käytä luokkia vanhemmille elementeille classListin avulla.
  • Viimeisenä keinona voit muuttaa tyyliä suoraan
Erinomainen esimerkki siitä, kuinka hiiren sijainti luetaan JavaScriptissä ja tallennetaan CSS Custom Properties -sovellukseen - (katkelma Lea Veroun puheesta)

Aina kun muutat tyylejä dynaamisesti, muista, että työskentelet selainta vastaan. Jokaisella tyylimuutoksella on vaikutuksia uudelleensuuntaamiseen, renderointiin ja maalaamiseen. Paul Lewis ja Das Surma ylläpitävät kätevää opasta nimeltä CSSTriggers. Tässä kuvataan yksityiskohtaisesti, mitkä CSS: n muutokset johtavat rangaistukseen selaimelle.

CSS Triggers antaa sinulle tietoja eri tyylimuutosten vaikutuksista

Yhteenvetona

CSS on paljon luotettavampi kuin ennen, eikä siellä ole paljon jäljellä, minkä pitäisi olla erilainen kuin mikä se on. Tärkeintä on muistaa, että CSS: n ei ole tarkoitus toimia samoin kuin JavaScript. Jopa asettelukielet eivät toimi CSS: n tapaan, ja kattavat saman tarpeen. Sillä on aika vaikea työ tehdä ja se menee hyvin. Kun käytät CSS: ää, selain auttaa sinua vastaamaan loppukäyttäjien tarpeita heidän asennuksestaan ​​riippumatta. Tämä on verkon perusperiaate, joka on määritelty W3C HTML -suunnitteluperiaatteissa:

Käyttäjät kirjoittajien yli teoreettisen puhtauden määrittäjien ja tekijöiden yli

Käyttäjämme ansaitsevat rajapinnat, jotka ovat sujuvia, luotettavia ja jotka eivät tapa paristojaan. Joten harkitse CSS: ää hieman enemmän. Voit olla laiska ja rakentaa yhteisön työtä.

Inspiroivia ja aktiivisia CSS-ihmisiä seuraamaan

Tutkiessani tätä keskustelua jatkoin palaamista resursseihin, jotka upea ihmiset ovat kirjoittaneet ja ylläpitäneet verkossa. Tässä on lyhyt luettelo ei erityisessä järjestyksessä ihmisiä, joita sinun tulisi seurata, jos haluat olla tekemisissä CSS-tietosi kanssa. Minun on kiitettävä kutakin heistä. He tekevät verkosta helpompaa meille kaikille.

  • Ire Aderinokun (@ireaderinokun) kirjoittaa paljon helppoa ymmärtää ja CSS: n tietobittejä blogissaan, bitsofco.de.
  • Ana Tudor (@anatudor) on kehittäjä, joka luo naurettavan monimutkaisia ​​ja kauniita animaatioita CSS: ssä. Hänen Codepen on yksi suosituimmista, ja se, mitä hän tekee CSS-moottoreille, on suuri apu selaimen valmistajille testata suorituskykyään.
  • Jen Simmons (@jensimmons) on CSS-asettelun ja suunnittelun asiantuntija, joka työskentelee Mozillassa
  • Rachel Andrew (@rachelandrew) on minulle CSS-verkkojen asiantuntija # 1
  • Chris Coyier (@chriscoyier) on uskomattoman CSS-resurssin CSS-temppujen ja interaktiivisen kehittämisleikkikunnan Codepen perustaja.
  • Sarah Drasner (@sarah_edo) on animaatio- ja suunnitteluasiantuntija, joka on keskittynyt ylläpidettävien tuotteiden rakentamiseen
  • Zoe M. Gillenwater (@zomigi) on johtava kehittäjä, joka käyttää verenvuotoreunan CSS: ää tuotannossa
  • Brad Frost (@brad_frost) on kirjoittanut Atomic Design -sovelluksen, skaalautuvan tavan käyttää ja käyttää uudelleen CSS: ää suurissa projekteissa
  • Rachel Nabors (@rachelnabors) on sarjakuvataiteilija ja animaatioasiantuntija, joka kirjoittaa verkkoanimaatioista ja eri tekniikoiden ansioista
  • Una Kravets (@una) on CSS: ään ja sen uusiin ominaisuuksiin erikoistunut kehittäjä. Hän on myös podcaster ja sormellaan erittäin paljon CSS: n ja muun visuaalisen tekniikan pulssissa
  • Lea Verou (@leaverou) on erinomaisen CSS-salaisuuksien kirjailija, tutkija MIT: ssä ja kutsunut asiantuntija W3C: n CSS-työryhmässä. Hän on huolellinen tutkimuksessaan ja häikäilemätön toimittaessaan paljon hienoa tietoa lyhyessä ajassa.
  • Sara Soueidan (@sarasoueidan) on kehittäjä, joka on asiantuntija reagoivasta suunnittelusta ja käytännöllisistä lähestymistavoista uusimman tekniikan käyttöön.

Minusta innostuu jatkuvasti näitä ihmisiä (amongeja muita) päivittäin, ja toivon, että saat saman kokemuksen