Die Kluft Zwischen CSS und JavaScript: CSS-JS

0
7

In diesem Artikel werden wir zu Graben, in das Konzept der CSS-JS. Wenn Sie bereits vertraut mit diesem Konzept, können Sie dennoch genießen Sie einen Spaziergang durch die Philosophie, das Konzept, und Sie vielleicht sogar mehr daran interessiert, in den nächsten Artikel (kommt morgen!).

Web-Entwicklung ist sehr interdisziplinär. Wir arbeiten eng mit mehreren Sprachen. Und, wie die Entwicklung von web-Anwendungen wird mehr an der Tagesordnung und nuanciert, wir suchen oft nach kreativen Möglichkeiten zur überbrückung der Lücken zwischen diesen Sprachen, um unsere Entwicklungs-Umgebungen und Arbeitsabläufe einfacher und effizienter.

Die häufigsten Beispiele sind in der Regel bei der Verwendung von Template-Sprachen. Zum Beispiel, eine Sprache, die verwendet werden könnten, um den code zu generieren, der ein mehr Informationen in der Sprache (oft HTML). Dies ist einer der wichtigsten Aspekte des front-end-frameworks — was bedeutet die Manipulation von HTML Aussehen? Die aktuellste Wendung in dieser Gegend war JSX, weil es nicht wirklich ein templating-Sprache; es ist eine syntax-Erweiterung um JavaScript, und es macht die Arbeit mit HTML wirklich lapidar.

Web-Anwendungen gehen Sie durch viele state-Kombinationen, und es ist oft schwierig zu verwalten, Inhalte allein. Dies ist der Grund, warum CSS manchmal auf der Strecke bleibt — auch wenn die Verwaltung styling durch verschiedene Staaten und media queries ist genauso wichtig und genauso schwierig. In dieser zweiteiligen Serie, möchte ich das CSS im Rampenlicht zu stehen und erkunden Sie die Lücke zwischen it und JavaScript. In dieser Reihe werde ich annehmen, dass Sie ein Modul bundler wie webpack. Als solche, die ich verwende, Reagieren meine Beispiele, aber die gleichen oder ähnliche Grundsätze gelten für andere JavaScript-frameworks, einschließlich Vue.

Die CSS-Landschaft entwickelt sich in viele Richtungen, denn es gibt eine Menge Herausforderungen zu lösen, und es gibt keine “richtigen” Pfad. Ich habe verbringen viel Aufwand das Experimentieren mit verschiedenen Ansätzen, die meist auf persönliche Projekte, so die Absicht, die hinter dieser Serie ist nur zu informieren, nicht zu verschreiben.

Herausforderungen von CSS

Vor dem Tauchen in code, lohnt es sich, zu erklären, die wichtigsten Herausforderungen der styling-web-Anwendungen. Diejenigen, die ich sprechen werde, in dieser Serie sind scoping, bedingte und dynamische Stile, und Wiederverwendbarkeit.

Scoping

Scoping ist ein bekannter CSS-Herausforderung, ist es die Idee des Schreibens Stile, die nicht Leck außerhalb der Komponente, vermeiden damit ungewollte Nebenwirkungen. Wir möchten erreichen, idealerweise ohne Kompromisse-authoring.

Bedingten und dynamischen styles

Während der Staat in front-end-Anwendungen begannen immer mehr und mehr erweiterte, CSS war noch statisch. Wir waren nur in der Lage, gelten die Sätze von Formatvorlagen bedingt — wenn eine Taste war primär, würden wir wahrscheinlich gilt die Klasse “primären” und definieren Sie die Stile in einer separaten CSS-Datei anwenden, wie es auf dem Bildschirm sehen. Ein paar vordefinierte button-Variationen war überschaubar, aber was, wenn wir wollen, haben eine Vielzahl von Tasten, wie spezifisch zugeschnitten , Pinterest und wer weiß was sonst? Was wir wirklich wollen, zu tun ist, übergeben Sie einfach eine Farbe und definieren Sie Staaten mit CSS wie hover, focus, Behinderte etc. Dies wird als dynamische Linienführung, weil wir nicht mehr Umschalten zwischen vordefinierten Stile — wir wissen nicht, was als Nächstes kommt. Inline-styles vielleicht in den Sinn kommen bei der Bekämpfung dieses Problems, aber Sie unterstützen nicht die pseudo-Klassen -, Attribut-Selektoren, media queries, oder so ähnlich.

Wiederverwendbarkeit

Die Wiederverwendung von Regelsätzen, media queries etc.. ist ein Thema, das ich sehen nur selten erwähnt, weil in letzter Zeit es wurde gelöst durch Präprozessoren wie Sass und Less. Aber ich würde noch gerne überdenken, die es in dieser Serie.

Ich Liste einige Techniken für den Umgang mit diesen Herausforderungen zusammen mit Ihren Einschränkungen in beiden teilen dieser Serie. Keine Technik ist besser als die andere und Sie sind auch nicht gegenseitig aus; Sie können wählen, ein, oder kombinieren Sie Sie, je nachdem, was Sie entscheiden, verbessern Sie die Qualität Ihres Projekts.

Setup

Wir zeigen verschiedene styling-Techniken mit Hilfe eines Beispiel-Komponente namens Foto. Wir erbringen eine ansprechende Bild, das kann abgerundete Ecken haben, während die Anzeige von alternativ-text, der als überschrift. Es wird z.B. so verwendet werden:

<Foto publicId=”Ballons” alt=”Hot air balloons!” gerundet />

Vor dem Aufbau der eigentlichen Komponente, wir werden abstrahieren das srcSet-Attribut, um das Beispiel-code kurz. Also, lassen Sie uns ein utils.js Datei mit zwei utilities für die Erzeugung von Bildern von verschiedenen breiten mit Cloudinary:

import { Cloudinary } aus ‘cloudinary-core”

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

export const getSrc = ({ publicId, Breite }) =>
cl.url(publicId, { crop: ‘Skalierung’, Breite })

export const getSrcSet = ({ publicId, Breite }) => Breite
.map(width => `${getSrc({ publicId, Breite })} ${Breite}w`)
.join(‘, ‘)

Wir richten unsere Cloudinary Instanz verwenden Sie den Namen des Cloudinary demo-cloud, sowie seine url-Methode zum generieren von URLs für das Bild publicId gemäß der angegebenen Optionen. Wir sind nur daran interessiert sind, ändern Sie die Breite in dieser Komponente.

Wir werden diese Dienstprogramme verwenden, die für das SRK und srcset-Attribute, bzw.:

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

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

Wenn Sie nicht vertraut sind mit srcset und sizes Attribute, schlage ich die Lektüre ein wenig über responsive ersten Bilder. Auf diese Weise werden Sie es leichter haben, nach den Beispielen.

CSS-JS

CSS-JS ist ein styling-Konzept, die abstracts der CSS-Modell auf der Ebene der Komponenten, anstatt der Dokument-Ebene. Dieser Idee ist, dass CSS beschränkt werden kann, um eine bestimmte Komponente — und nur diese Komponente — in dem Maße, dass diejenigen, die bestimmte Formate nicht mit geteilt oder geleckt zu anderen Komponenten, und weiter, nur aufgerufen, wenn Sie benötigt werden. CSS-JS-Bibliotheken anlegen von styles zur Laufzeit durch einfügen von <style> – tags im <head>.

Eine der ersten Bibliotheken, um dieses Konzept zu verwenden, ist JSS. Ist hier und Beispiel den Einsatz seiner syntax:

importieren Reagieren von ‘reagieren’
import injectSheet von ‘reagieren-jss’
import { getSrc, getSrcSet } from ‘./utils’

const styles = {
Foto: {
Breite: 200,
‘@media (min-width: 30rem)’: {
Breite: 400,
},
borderRadius: Requisiten => (Requisiten.gerundet ? ‘1rem’ : 0),
},
}

const Foto = ({ Klassen, publicId, alt }) => (
<Abbildung>
<img
className={Klassen.Foto}
src={getSrc({ publicId, width: 200 })}
srcSet={getSrcSet({ publicId, breiten: [200, 400, 800] })}
Größen=”(min-width: 30rem) 400px, 200px”
/>
<figcaption>{alt}</figcaption>
</figure>
)
Foto.defaultProps = {
gerundet: false,
}

export Standard-injectSheet(Stile)(Foto)

Auf den ersten Blick, die styles-Objekt sieht aus wie CSS, geschrieben in Objekt-notation mit zusätzlichen Funktionen, wie man eine Funktion, um den Wert basierend auf Requisiten. Die generierten Klassen sind einzigartig, so dass Sie nie brauchen, um über Sie Kollision mit anderen Stilen. In anderen Worten, Sie bekommen scoping-kostenlos! Dies ist, wie die meisten CSS-JS-Bibliotheken arbeiten — natürlich mit einigen Wendungen in den features und der syntax, die wir behandeln werden, wie wir gehen.

Sie können sehen, indem Sie die Attribute, die die Breite unseres gerenderten Bildes beginnt bei 200px, dann, wenn die viewport-Breite wird mindestens 30rem erhöht sich die Breite auf 400px Breite. Wir generierten eine zusätzliche 800 Quelle zu decken, auch größere Bildschirmauflösungen:

  • 1x Bildschirme verwenden, 200 und 400
  • 2x Bildschirme verwenden, 400 und 800

Stil-Komponenten ist ein weiteres CSS-JS-Bibliothek, aber mit viel mehr vertraut, die syntax, die geschickt verwendet tagged Vorlage Literale anstelle von Objekten Aussehen mehr CSS:

importieren Reagieren von ‘reagieren’
import gestaltete, { css } von ‘Stil-Komponenten’
import { getSrc, getSrcSet } from ‘./utils’

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

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

const Image = gestylt.img -`
width: 200px;
@media ${mediaQuery} {
width: 400px;
}
${props => Requisiten.abgerundete && roundedStyle};

const Foto = ({ publicId, alt, gerundet }) => (
<Abbildung>
<Bild
src={getSrc({ publicId, width: 200 })}
srcSet={getSrcSet({ publicId, breiten: [200, 400, 800] })}
Größen={`${mediaQuery} 400px, 200px`}
gerundet={rounded}
/>
<figcaption>{alt}</figcaption>
</figure>
)
Foto.defaultProps = {
gerundet: false,
}

export-Standard-Foto

Wir schaffen oft semantisch Neutrale Elemente wie <div> und <span>, die ausschließlich für styling Zwecke. Diese Bibliothek, und viele andere, ermöglichen es uns, erstellen und Stil Sie in einer einzigen Bewegung.

Meine Lieblings Vorteil dieser syntax ist, dass es wie das reguläre CSS -, minus-Interpolationen. Dies bedeutet, dass wir migrieren unser CSS-code mehr leicht und wir nutzen unsere vorhandenen Muskel-Speicher, anstatt Sie sich vertraut mit dem schreiben von CSS-Code in den Objekt-syntax.

Beachten Sie, dass wir interpolieren kann fast alles in unserem Stile. Dieses spezielle Beispiel zeigt, wie wir sparen können, die media query in die variable und verwenden es in mehreren Orten. Responsive images sind ein hervorragender Anwendungsfall für diese, weil das Größen-Attribut enthält, im Grunde CSS, so können wir JavaScript verwenden, um den code mehr TROCKEN.

Lassen Sie uns sagen, dass wir beschlossen, wir wollen optisch ausblenden der Beschriftung, aber immer noch machen es zugänglich für Screenreader. Ich weiß, dass ein besserer Weg, dies zu erreichen, wäre die Verwendung von einem alt-Attribut statt, aber benutze mal eine andere Art und Weise zum Wohle dieses Beispiel. Wir können eine Bibliothek mit Stil Mixins in Verbindung genannt Poliert, es funktioniert Super mit CSS-JS-Bibliotheken machen es ideal für unser Beispiel. Diese Bibliothek enthält eine mixin genannt hideVisually, die genau das macht, was wir wollen und wir können es verwenden, durch interpolieren der seinen Rückgabewert:

import { hideVisually } von ‘Poliert’

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

<Caption>{alt}</Caption>

Obwohl hideVisually Ausgänge ein Objekt, das Stil-Komponenten-Bibliothek weiß, wie man interpolieren Sie als Stile.

CSS-JS-Bibliotheken haben viele erweiterte Funktionen wie Thematisierung, vendor-Präfix und sogar inlining kritischen CSS, die es einfach macht, mit dem schreiben aufzuhören CSS-Dateien. An diesem Punkt können Sie beginnen, um zu sehen, warum CSS-JS wird ein verlockendes Konzept.

Nachteile und Einschränkungen

Der offensichtliche Nachteil an CSS-JS ist, dass es stellt eine Laufzeitumgebung: die Stile müssen geladen, geparst und ausgeführt wird per JavaScript. Die Autoren der CSS-JS-Bibliotheken hinzufügen, alle Arten von smart-Optimierungen, wie Babel plugins, aber einige runtime-Kosten wird, aber trotzdem vorhanden.

Es ist auch wichtig zu beachten, dass diese Bibliotheken werden nicht analysiert PostCSS weil PostCSS war nicht entworfen zu sein gebracht in die Laufzeit. Viele nutzen stylis statt als ein Ergebnis, weil es viel schneller. Dies bedeutet, dass wir leider nicht verwenden können, PostCSS plugins.

Der Letzte Nachteil, den ich nennen werde, ist das tooling. CSS-JS entwickelt sich zu einem wirklich schnellen Tempo und text-editor-Erweiterung, linters, code-Formatierer etc. brauchen, um zu spielen catch-up mit neuen features bleiben auf Augenhöhe. Zum Beispiel, Menschen sind mit der VS-Code-Erweiterung gestylt-Komponenten für ähnliche CSS-JS-Bibliotheken wie emotion, auch wenn Sie nicht alle haben die gleichen Funktionen. Ich habe sogar gesehen, API-Auswahl der vorgeschlagenen Merkmale beeinflusst wird, durch die das Ziel der Beibehaltung der syntax-highlighting!

Die Zukunft

Es gibt zwei neue CSS-JS-Bibliotheken, Linaria und Kunstrasen, die es geschafft haben, null-Laufzeit durch die Extraktion CSS in Dateien. Deren APIs sind ähnlich gestylt-Komponenten, aber Sie unterscheiden sich in Funktionen und Ziele.

Das Ziel von Linaria ist zu imitieren die API von CSS-JS-Bibliotheken wie Stil-Komponenten durch integrierte features wie scoping, NIST-und vendor-Präfix. Umgekehrt, Kunstrasen basiert auf CSS-Module, hat begrenzte interpolation-Fähigkeiten, und fordert mit einem CSS-ökosystem statt aufzuschieben, bis JavaScript.

Ich baute Gatsby plugins für beide Bibliotheken, wenn Sie wollen, mit Ihnen zu spielen:

  • gatsby-plugin-linaria
  • gatsby-plugin-Kunstrasen

Zwei Dinge gibt es zu beachten bei der Verwendung dieser Bibliotheken:

  1. nachdem tatsächlichen CSS-Dateien bedeutet, dass wir Ihnen mit bekannten tools wie PostCSS
  2. Linaria verwendet benutzerdefinierte Eigenschaften (ein.k.ein. CSS-Variablen) unter der Haube, werden Sie sicher und nehmen Sie Ihre browser-Unterstützung in Betracht, bevor Sie diese Bibliothek

Fazit

CSS-JS all-in-one styling-Lösungen für die überbrückung der Lücke zwischen CSS und JavaScript. Sie sind einfach zu bedienen und Sie enthalten nützliche built-in — Optimierungen- aber all das kommt zu einem Preis. Vor allem durch die Verwendung von CSS-JS, im Prinzip sind wir Auswerfen aus der CSS-ökosystem und verzögern JavaScript, unsere Probleme zu lösen.

Null-runtime-Lösungen mildern einige der Nachteile, indem wieder die CSS-Werkzeuge, steigt der CSS-JS Diskussion auf eine viel interessantere Ebene. Was sind die tatsächlichen Grenzen des preprocessing-tools im Vergleich zu CSS-JS? Dies wird im nächsten Teil dieser Serie.

Artikel-Serie:

  1. CSS-JS (Dieser Beitrag)
  2. CSS-Module, PostCSS und die Zukunft von CSS (Kommt morgen!)