Het overbruggen van de Kloof Tussen CSS en JavaScript-CSS-JS

0
5

In dit artikel gaan we dieper in op het concept van CSS-JS. Als u bent al bekend met dit concept, kunt u nog steeds genieten van een wandeling door de filosofie van aanpak, en u misschien zelfs nog meer geïnteresseerd in het volgende artikel (komt morgen!).

Web development is zeer interdisciplinair. We zijn gewend om nauw samen te werken met meerdere talen. En, zoals het ontwikkelen van web applicaties steeds meer gemeengoed en genuanceerd zijn, zijn we vaak op zoek naar creatieve manieren om de kloof overbruggen tussen die talen te maken van onze ontwikkeling omgevingen en werkprocessen gemakkelijker en efficiënter.

De meest voorkomende voorbeelden zijn meestal bij het gebruik van templates talen. Bijvoorbeeld, één taal kan worden gebruikt voor het genereren van de code van een meer uitgebreide taal (vaak HTML). Dit is een van de belangrijkste aspecten van de front end kaders — wat doet het manipuleren van HTML eruit? De meest recente wending in dit gebied was JSX want het is niet echt een template language; het is een syntaxis uitbreiding op JavaScript, en het maakt het werken met HTML-heel beknopt.

Web applicaties gaan door middel van vele staat combinaties en het is vaak een uitdaging voor het beheren van inhoud alleen. Dit is de reden waarom CSS soms valt uit de boot, hoewel het beheer van styling door verschillende staten en media query ‘ s is net zo belangrijk en net zo uitdagend. In deze twee-delige serie, ik zou graag een CSS in de spotlight en verken het overbruggen van de kloof tussen it en JavaScript. In deze serie zal ik aannemen dat u het gebruik van een module bundler zoals webpack. Als zodanig zal ik Reageren in mijn voorbeelden, maar dezelfde of soortgelijke principes zijn ook van toepassing op andere JavaScript-frameworks, waaronder Vue.

De CSS landschap ontwikkelt zich in vele richtingen, want er zijn een hoop uitdagingen op te lossen en er is geen “juiste” pad. Ik heb de uitgaven aanzienlijke inspanning te experimenteren met verschillende benaderingen, vooral op het persoonlijke projecten, dus het is de bedoeling achter deze serie is alleen te informeren, niet om te schrijven.

Uitdagingen van CSS

Voor het duiken in de code, het is de moeite waard het uitleggen van de meest opmerkelijke uitdagingen van de styling van web applicaties. Degenen die ik het over zal hebben in deze serie zijn scoping, voorwaardelijke en dynamische stijlen, en herbruikbaarheid.

Scoping

Scope is een bekende CSS uitdaging, het is het idee van het schrijven van stijlen die niet lek buiten de component, dus geen ongewenste neveneffecten. Wij willen graag om dit te bereiken ideaal, zonder afbreuk te doen authoring ervaring.

Voorwaardelijke en dynamische stijlen

Terwijl de toestand in de front-end applicaties begon steeds meer en meer geavanceerde, CSS was nog statisch. We konden alleen van toepassing sets van stijlen voorwaardelijk — als er een knop was primair, zouden we waarschijnlijk het toepassen van de klasse “primaire” en definieer de stijlen in een apart CSS-bestand toe te passen hoe het eruit gaat zien op het scherm. Met een paar vooraf ingestelde knop variaties was te overzien, maar wat als we willen een verscheidenheid van knoppen, zoals specifieke, op maat gemaakt voor , , Pinterest en wie weet wat nog meer? Wat we eigenlijk willen doen is gewoon langs een kleur en definiëren staten met CSS zoals beweeg -, focus -, gehandicapten enz. Dit is de zogenaamde dynamische styling, omdat we niet langer te schakelen tussen voorgedefinieerde stijlen — we weten niet wat er komen gaat. Inline styles wellicht opkomt voor de aanpak van dit probleem, maar ze bieden geen ondersteuning voor pseudo-classes, attribuut-selectors, media queries of dergelijke.

Herbruikbaarheid

Hergebruik van regelsets, media queries, enz. is een onderwerp dat zelden zie ik vermeld de laatste tijd want het is al opgelost door preprocessors zoals Sass en Less. Maar ik zou toch graag herbekijken in deze serie.

Ik zal de lijst een aantal technieken voor het omgaan met deze uitdagingen samen met hun beperkingen in beide delen van deze serie. Geen techniek is superieur aan de anderen en ze zelfs niet wederzijds exclusief; je kunt kiezen of combineren ze, afhankelijk van wat u beslist aan het verbeteren van de kwaliteit van uw project.

Installatie

We tonen verschillende styling technieken met behulp van een voorbeeld van een onderdeel met de naam van de Foto. We maken een responsieve beeld, dat kan hebben afgeronde hoeken tijdens het weergeven van de alternatieve tekst als bijschrift. Het zal worden gebruikt, zoals deze:

<Foto publicId=”ballonnen” alt=”Hete lucht ballonnen!” afgerond />

Voordat de bouw van de werkelijke component, we abstracte afstand de srcSet kenmerk om de voorbeeld code kort. Dus, laten we een utils.js bestand met twee hulpprogramma ‘ s voor het genereren van beelden van verschillende breedtes met Cloudinary:

importeren { Cloudinary } van ‘cloudinary-core’

const cl = Cloudinary.nieuwe({ cloud_name: ‘demo’, secure: true })

export const getSrc = ({ publicId, breedte }) =>
cl.url(publicId, { gewas: ‘schaal’, breedte })

export const getSrcSet = ({ publicId, breedte }) => breedtes
.kaart(width => `${getSrc({ publicId, breedte })} ${breedte}w`)
.join(‘, ‘)

We zetten onze Cloudinary exemplaar te gebruiken van de naam van Cloudinary de demo van cloud, alsook de url van de methode voor het genereren van Url ‘ s voor de afbeelding publicId volgens de opgegeven opties. Zijn We alleen geïnteresseerd in het aanpassen van de breedte in dit onderdeel.

We gebruiken deze hulpprogramma ‘ s voor de src en srcset kenmerken, respectievelijk:

getSrc({ publicId: ‘ballonnen’, breedte: 200 })
// => ‘https://res.cloudinary.com/demo/image/upload/c_scale,w_200/ballonnen’

getSrcSet({ publicId: ‘ballonnen’, breedtes: [200, 400] })
// => ‘https://res.cloudinary.com/demo/image/upload/c_scale,w_200/ballonnen 200w,
https://res.cloudinary.com/demo/image/upload/c_scale,w_400/ballonnen 400w’

Als u niet bekend bent met srcset en maten kenmerken, stel ik voor het lezen van een stukje over responsive images eerste. Op die manier heb je een gemakkelijkere tijd het volgen van de voorbeelden.

CSS-JS

CSS-JS is een styling aanpak die samenvattingen van de CSS-model op het niveau van de componenten, eerder dan het document niveau. Dit idee is dat met CSS kan worden binnen het bereik van een bepaalde component — en alleen die componenten in de mate dat deze specifieke stijlen niet gedeeld met of gelekt naar andere componenten, en verder, de zogenaamde alleen wanneer ze nodig zijn. CSS-JS-bibliotheken van het maken van stijlen in de runtime-door het invoegen van <style> – tags in de <head>.

Een van de eerste bibliotheken om dit concept te gebruiken is JSS. Hier is een voorbeeld en de tewerkstelling van de syntaxis:

importeren Reageren van ‘reageren’
importeren injectSheet van de ‘reageer-jss’
importeren { getSrc, getSrcSet }’. /utils’

const stijlen = {
foto: {
breedte: 200,
‘@media (min-width: 30rem)’: {
breedte: 400,
},
borderRadius: props => (rekwisieten.afgeronde ? ‘1rem’ : 0),
},
}

const Foto = ({ klassen, publicId, alt }) => (
<afbeelding>
<img
className={klassen.foto}
src={getSrc({ publicId, breedte: 200 })}
srcSet={getSrcSet({ publicId, breedtes: [200, 400, 800] })}
maten=”(min-width: 30rem) 400px, 200px”
/>
<figcaption>{alt}</figcaption>
</figure>
)
De foto.defaultProps = {
afgerond: false,
}

export standaard injectSheet(stijlen)(Foto)

Op het eerste gezicht, het object stijlen ziet eruit als CSS geschreven in object notation met extra functies, zoals het passeren van een functie voor het instellen van de waarde op basis van rekwisieten. De gegenereerde klassen zijn uniek, zo hoeft u zich nooit zorgen te maken over hun conflict met andere stijlen. In andere woorden, u krijgt scoping gratis! Dit is hoe de meeste CSS-JS-bibliotheken van werk — natuurlijk, met een aantal wendingen in de kenmerken en de syntaxis die we zullen behandelen als we gaan.

U kunt zien door de kenmerken van de breedte van onze gerenderde afbeelding begint bij 200px, dan wanneer de viewport breedte wordt ten minste 30rem, de breedte vergroot te 400px breed. We leverden een extra 800 bron ter dekking van nog groter scherm dichtheden:

  • 1x schermen gebruiken de 200 en 400
  • 2x schermen gebruiken de 400 en 800

stijl-onderdelen is een ander CSS-JS library, maar met een veel meer vertrouwd syntaxis die slim gebruik maakt van tagged sjabloon letters in plaats van objecten te kijken meer als CSS:

importeren Reageren van ‘reageren’
importeer stijl, { css } van de ‘stijl-onderdelen”
importeren { getSrc, getSrcSet }’. /utils’

const mediaQuery = ‘(min-width: 30rem)’

const roundedStyle = css`
border-radius: 1rem;
`

const Image = gestyled.img`
breedte: 200px;
@media – ${mediaQuery} {
width: 400px;
}
${props => rekwisieten.afgeronde && roundedStyle};

const Foto = ({ publicId, alt, afgerond }) => (
<afbeelding>
<Afbeelding
src={getSrc({ publicId, breedte: 200 })}
srcSet={getSrcSet({ publicId, breedtes: [200, 400, 800] })}
maten={`${mediaQuery} 400px, 200px`}
afgeronde={afgerond}
/>
<figcaption>{alt}</figcaption>
</figure>
)
De foto.defaultProps = {
afgerond: false,
}

export standaard Foto

We maken vaak semantisch-neutrale elementen zoals <div> en <span> uitsluitend voor het stylen van toepassing. Deze bibliotheek, en vele anderen, stellen ons in staat om te maken en ze in een enkele beweging.

Mijn favoriete voordeel van deze syntaxis is dat het net als de gewone CSS, minus interpolaties. Dit betekent dat we kunnen migreren onze CSS-code gemakkelijker en we krijgen gebruik te maken van onze bestaande spier-geheugen in plaats van het hebben van onszelf vertrouwd te maken met het schrijven van CSS in de object-syntaxis.

Merk op dat we kunnen interpoleren bijna alles in onze stijlen. Dit specifieke voorbeeld laat zien hoe we kunnen de media query in de variabele en hergebruiken in meerdere plaatsen. Reageren beelden zijn een uitstekend gebruiken geval omdat de maten attribuut bevat in principe CSS, dus we kunnen gebruik maken van JavaScript om de code meer DROOG.

Laten we zeggen dat we besloten dat we willen om visueel te verbergen voor de titel, maar nog steeds toegankelijk maken voor schermlezers. Ik weet dat er een betere manier om dit te bereiken is het gebruik van een alt-attribuut in plaats, maar laten we gebruik maken van een andere manier omwille van dit voorbeeld. We kunnen gebruik maken van een bibliotheek van stijl mixins genoemd gepolijst — het werkt geweldig met CSS-JS-bibliotheken van het maken van het grote voorbeeld. Deze bibliotheek bevat een mixin genoemd hideVisually die precies doet wat we willen en we kunnen gebruik maken van het door interpoleren de retourwaarde:

importeren { hideVisually } van ‘gepolijst’

const Caption = gestyled.figcaption`
${hideVisually()};
`

<Bijschrift>{alt}</Caption>

Hoewel hideVisually uitgangen van een object, de stijl-componenten bibliotheek weet hoe om te interpoleren als stijlen.

CSS-JS-bibliotheken hebben vele geavanceerde functies, zoals thema ‘ s, heeft de verkoper het voorvoegsel en zelfs inlining kritische CSS, waardoor het makkelijk is om te stoppen met het schrijven van CSS-bestanden geheel. Op dit punt, kunt u beginnen te zien waarom CSS-JS wordt een aantrekkelijk concept.

Nadelen en beperkingen

De voor de hand liggende nadeel van CSS-JS is dat het introduceert een runtime: de stijlen moeten worden geladen, geanalyseerd en uitgevoerd via JavaScript. Auteurs van CSS-JS-bibliotheken zijn het toevoegen van allerlei slimme optimalisaties, zoals Babel plugins, maar sommige runtime kosten zullen toch bestaan.

Het is ook belangrijk op te merken dat deze bibliotheken niet worden geparseerd door PostCSS omdat PostCSS was niet ontworpen om te worden meegenomen in de uitvoering. Velen gebruiken stijlvolle accommodatie in de plaats als resultaat, omdat het veel sneller is. Dit betekent dat we helaas niet kunnen gebruiken PostCSS plugins.

Het laatste nadeel dat ik zal noemen, is het gereedschap. CSS-JS evolueert in een heel snel tempo en tekst-editor uitbreiding, linters, code-formatteerders enz. moet catch-up spelen met nieuwe mogelijkheden om te verblijven op par. Bijvoorbeeld, mensen zijn met behulp van de VS-Code uitbreiding stijl-onderdelen voor soortgelijke CSS-JS-bibliotheken zoals emoties, zelfs al zijn ze niet allemaal dezelfde eigenschappen. Ik heb zelfs gezien API keuzes van de voorgestelde functies die worden beïnvloed door het doel van behoud van syntax highlighting!

De toekomst

Er zijn twee nieuwe CSS-JS-bibliotheken, Linaria en kunstgras, die er in zijn geslaagd nul runtime door het extraheren van CSS in bestanden. Hun Api ‘ s zijn vergelijkbaar met de stijl-onderdelen, maar ze verschillen in de kenmerken en doelstellingen.

Het doel van Linaria is om na te bootsen de API van CSS-JS-bibliotheken als stijl-componenten door het hebben van ingebouwde functies zoals scoping, nesten en verkoper als voorvoegsel. Omgekeerd, kunstgras is gebaseerd op CSS Modules, heeft een beperkte interpolatie mogelijkheden, en moedigt het gebruik van een CSS-ecosysteem in plaats van uitstel van JavaScript.

Ik bouwde Gatsby plugins voor zowel bibliotheken als je wilt spelen met hen:

  • gatsby-plugin-linaria
  • gatsby-plugin-kunstgras

Twee dingen om in gedachten hebben bij het gebruik van deze bibliotheken:

  1. het hebben van de werkelijke CSS-bestanden kunnen wij verwerken ze met de bekende tools zoals PostCSS
  2. Linaria maakt gebruik van aangepaste eigenschappen (een.k.een. CSS variabelen) onder de motorkap, neem hun browser ondersteuning in aanmerking worden genomen voor het gebruik van deze bibliotheek

Conclusie

CSS-JS zijn all-in-one styling oplossingen voor het overbruggen van de kloof tussen CSS en JavaScript. Ze zijn gemakkelijk in gebruik en ze bevatten nuttige ingebouwde optimalisatie — maar dat alles komt op een kostprijs. Met name door het gebruik van CSS-JS, we zijn in essentie eruit halen van de CSS-ecosysteem en uitstel van JavaScript om onze problemen op te lossen.

Nul-runtime-oplossingen verminderen sommige van de nadelen door het terugbrengen van de CSS tools, die afdaalt van de CSS-JS discussie tot een veel interessanter niveau. Wat zijn de werkelijke beperkingen van pre-processing tools vergeleken met CSS-JS? Dit zal worden behandeld in het volgende deel van deze serie.

Serie Artikelen:

  1. CSS-JS (Deze post)
  2. CSS Modules, PostCSS en de Toekomst van CSS (Komt morgen!)