Dieser Artikel interviewt Thierry Kobleentz, Schöpfer von Atomic CSS, um einen detaillierten Blick auf die Geschichte und den Kontext dieses beliebten CSS-Frameworks zu erhalten. Thierry ist jetzt im Ruhestand und verfügt über umfangreiche Erfahrung beim Schreiben großer CSSS und hat als Front-End-Ingenieur bei Yahoo gearbeitet.
Thierry gilt allgemein als das Konzept von Atomic CSS in den Mainstream für seinen klassischen Artikel „Herausforderndes CSS Best Practices“ 2013 im Smashing Magazine. Dieser Artikel ebnet den Weg für viele beliebte CSS -Bibliotheken im Laufe der Jahre. In diesem Interview überprüft Thierry die Geschichte von Atomic CSS und reflektiert seine anhaltenden Auswirkungen.
Thierry Kobletz: Nachdem ich 1997 in die Vereinigten Staaten gezogen war, habe ich mir HTML, CSS und JavaScript als Hobbys beigebracht.
Zu dieser Zeit verwendete ich FrontPage und verließ sich stark auf Newsgroups, um Anleitungen zu erhalten. Ich wurde schnell ein Stammkunde von Macromedia Newsgroups und CSS-Discuss. Schon früh unterstützte ich die Web -Standard -Projektphilosophie und entwickelte ein starkes Interesse an Barrierefreiheit. Seit Jahren ist das Frontend nur ein Hobby für mich (mein wahrer Job ist ein Antiquitätenhändler). Ich würde gelegentlich eine Website erstellen, aber ich schreibe und veröffentliche (viele) Artikel, die ich gelernt oder „entdeckt“ habe.
Dies hat sich für Yahoo's Call im Jahr 2007 ausgezahlt und mich gefragt, ob ich das Stylesheet für die YAHOO! Stellenbeschreibung: Nein HTML, kein JavaScript, nur CSS! Und viele!
TK: Meine Rolle bei Yahoo hat sich im Laufe der Jahre stark verändert.
Meine erste Aufgabe war es, ein Stylesheet für eine YSS -Vorlage (ähnlich wie der CSS Zen Garden) zu erstellen. Dann, bevor YSS nach Bangalore (Indien) „geliefert“ wurde, habe ich die Markierungen und Stile der YSS -Website neu geschrieben - wo meine Kollegen und ich wegen „Wissenstransfer“ geschickt wurden.
Übrigens ist es die Herausforderung, Stylesheets zu ersetzen, um verschiedene Designs für YSS zu erstellen, die uns dazu zwingen, eine leichte (Nicht-JS) Lösung zu finden, um die Größe von Videos im laufenden Fliegen zu ändern.
Nach YSS hatte ich die Gelegenheit, nur an Projekten teilzunehmen (neu zu schreiben oder auf andere Weise), und ich bin zunehmend an der Yahoo-Front-End-Arbeit beteiligt. Ich erstelle viele interne Dokumente (d. H. CSS-Codierungsstandards) ALS;
Ein weiterer zusätzlicher Hinweis, dass ich in meinen acht Jahren bei Yahoo wahrscheinlich keine 100 Zeilen Javascript -Code hatte. Wenn ich nicht gekündigt oder gefeuert wurde, ist es Lingyan Zhu und Renato Iwashima zu verdanken.
TK: In den frühen Tagen gab es weder Bibliotheken noch veröffentlichte Methoden; Auf meiner alten Seite hatte ich sogar einen Kommentar wie diesen:
<code></code>
Alles ist fairer Wettbewerb, alles wird missbraucht, weil wir nur sehr begrenzte Werkzeuge haben und viele Dinge tun müssen.
Aber als ich zu Yahoo kam, änderten sich die Dinge dramatisch. Entwickler aus Großbritannien sind überzeugte Unterstützer von Webstandards und ich danke ihnen für ihren großen Einfluss darauf, wie Yahoo's HTML und CSS geschrieben werden. Semantisches Tagging ist eine Realität, und CSS ist ein "T" im Übereinstimmung mit dem Prinzip der Trennung von Bedenken (SOC) (obwohl manchmal zu scharf für mich).
Yui hat CSS -Komponenten, hat aber noch kein CSS -Framework. Es gibt eine interne CSS -Bibliothek (genannt LEGO), aber ich habe sie nie benutzt. OOCSS, SMACSS, ECSS (Gruß an Ben), BEM, Bootstrap, reine und andere Methoden und Bibliotheken werden bald erscheinen.
TK: Bevor YSS nach Indien zog, fragte mein Manager Michael Montesano, ob es eine Möglichkeit gibt, das Team in Bangalore zu bringen, um zu vermeiden, wie sich Style -Laken befinden, und damit das Risiko von Schäden verringert . Ich denke, die Erfahrung von YSS -Vorlagen (bezahlte Kunden beschweren sich, dass die Seite beschädigt wird) macht ihn sehr paranoid, wenn sie Änderungen am Stylesheet vornehmen.
Im Geiste meiner EZ -CSS -Bibliothek habe ich also eine "Gebrauchttabelle" erstellt - eine Tabelle, die es Entwicklern ermöglicht, ihre Stile zu implementieren , ohne Regeln für das Stylesheet hinzuzufügen .
Ein paar Jahre später fragte mich Michael, der damalige Regisseur von Engineering, ob ich die Homepage von Yahoo mit dem Utility-Kurs nur neu gestalten könne, weil er wusste, dass wir wieder nicht für die Wartung der Website verantwortlich wären. Wir haben die Priorisierung der Versorgungskurse gegenüber semantischen Klassen besprochen, und ich glaube nicht, dass auf dieser Ebene zu dieser Zeit keine Sache existierte. Dies ist ein sehr mutiger Schritt.
Diese massive Übung wurde schnell zu einem Beweis für das Konzept und zeigte viele der Vorteile des Stylings mit Tags . Es hat so viele Kästchen überprüft, dass wir uns entschieden haben, Yahoo! meine Heimprodukte mit diesem "statischen" Stylesheet (genannt als Schablone) neu zu gestalten.
TK: Unsere Schablonenbibliothek ist statisch und es ist ein großartiges Werkzeug, um Designstile durchzusetzen - wir glauben, dass Yahoo diesen Stil in all seinen Eigenschaften annehmen wird. Wir stellten schnell fest, dass dies nicht passieren würde. Jedes Yahoo Designteam hat seine eigenen Meinungen zu perfekten Schriftgrößen, perfekten Margen usw. Wir erhalten immer wieder Anfragen, um der Bibliothek sehr spezifische Stile hinzuzufügen.
Diese Situation ist unbetentbar. Deshalb haben wir uns entschlossen, ein Tool zu entwickeln, mit dem Entwickler ihre eigenen Stile im laufenden Fliegen erstellen und gleichzeitig die atomare Natur der kreativen Methode respektieren können. So wurde Atomizer geboren. Wir haben aufgehört, Stile hinzuzufügen-CSS-Erklärungen-und uns stattdessen darauf konzentriert, reichhaltiges Vokabular zu erstellen, das Entwicklern eine breite Palette von Stilen wie Medienabfragen, Nachkommensauswahl, Pseudoklassen und vieles mehr bietet.
Mit ACSS können Entwickler alles verwenden, was sie wollen. Und es gibt einige neue direkte Vorteile für die Stile, die Entwickler verwendet haben. Sie müssen sich keine Sorgen mehr machen, dass ihre Stile die Seite brechen, und sie müssen sich auch darum kümmern, dass sie Selektoren schreiben, um ihre Komponenten zu stylen.
ACSS wurde ursprünglich gebaut, um die Probleme von Yahoo zu lösen und in Yahoos Umgebung zu arbeiten.
Zu den an den Atomic CSS beteiligten Personen zählen Renato Iwashima, Steve Carlson und ich. Renato und Steve haben den Zerstäuber geschaffen.
TK: Als ich 2007 zu Yahoo kam, erfuhr ich schnell, wie groß die Codebasis sein könnte. Es gibt viele Standorte in der Zeit, in denen sich die Zonen in der Zeit befinden
Das meiste davon ist für mich brandneu und ich muss lernen, ob und wie es sich auf die Art und Weise auswirkt, wie ich CSS schreibe. Ich begann alle meine Überzeugungen zu überdenken und herauszufordern, weil viele Techniken oder Methoden, die für mich übliche Praktiken sind, nicht passen oder zumindest für komplexe Anwendungen kontraproduktiv sind.
Ein "Reality -Check" bezieht sich auf Stilabstraktion. Wir alle haben den Artikel gelesen, dass die Zuordnung von M-10-Klassen zu Rand: 10px keine gute Idee ist, da dies bedeutet , sowohl HTML als auch CSS zu bearbeiten, um den Stil zu ändern. Leider passiert dies in großen/komplexen Projekten:
Um ein solches Problem vorherzusagen, ist es notwendig, die Absicht des Designers hinter seiner Anfrage zu verstehen: Ist der Stil aufgrund seiner Abstraktion wie der Farbprimär oder des spezifischen Wertes wie der 15-Pixel-Marge in unserem M-3x-Fall gewählt? Wenn es Stilführer gibt, um Designprinzipien durchzusetzen, können Klassen wie M-3x in Ordnung sein. Wenn das Designteam jedoch jeden gewünschten Stil anfordern kann, ist es besser, Konventionen zu benennen, die zu verschwommenen Stilen führen. Nach meiner Erfahrung kann jede Mehrdeutigkeit zu Schäden führen.
Wenn Sie sich auf die Struktur eines Dokuments oder einer Komponente für die Style -Einstellung verlassen - durch einen Kombinierer wie> oder - runden Sie eine nette Möglichkeit, ein Stylesheet zu schreiben, aber es ignoriert die Tatsache, dass in komplexen Umgebungen nicht angenommen werden kann, dass ein bestimmtes Tag oder eine bestimmte Struktur unveränderlich ist.
Denken Sie, dass Z-Index kompliziert ist? Denken Sie noch einmal darüber nach, wenn Sie nicht einmal die Stack -Reichweite haben, in der sich Ihre Komponenten befinden. Dies ist eines der komplexesten Probleme in großen Projekten, bei denen das Team für verschiedene Teile der Seite verantwortlich ist. Ich habe einmal einen Vorschlag dazu geschrieben.
Qualifizierte Selektoren - wie input.Reforde und .Input.Required - sieht gut und semantisch aus, aber es schafft unnötige Spezifitätsniveaus - wie 0,1.1 und 0.2.0 - und verhindert Tag -Änderungen.
Verweilen Sie sich auf Wildcard -Selektor*, um globale Umfangsstile festzulegen? In einem sehr großen Projekt kann dies bedeuten, dass Sie die Komponenten anderer Menschen stylen. Treffen Sie keine Stilentscheidungen für andere, es sei denn, Sie verstehen ihre Bedürfnisse.
Ich glaube, Sie lesen, dass die ID schlecht ist, die Spezifität ist schlecht, aber. Tatsächlich. Eine hohe Spezifität ist nicht so problematisch wie die Anzahl der von Ihren Regeln erstellten Spezifitätsniveaus. Es ist viel einfacher, in einer Umgebung zu stylen, in der es nur zwei oder drei Existenzebenen gibt - beispielsweise 1,1,0, 0,1,0, 0,2,0 - als in einer Umgebung mit eher geringer Spezifität, aber nach einem "freien Wettbewerb" -Ansatz - beispielsweise 0,1,0, 0,1,1, 0,2.0, 0.2.2, 0.2.2 usw. - zu einem Verteidigungsmechanismus.
Ein blind den Rat der CSS -Community kann zu unangenehmen Überraschungen führen. NIEMALS neue Technologien einführen, die in der Praxis noch nicht getestet wurden. Erinnerst du dich an Will Change? Und wissen Sie immer, welchen Stil Sie verwenden oder was es auslösen kann. Zum Beispiel kann Position einen Stapelkontext und einen enthaltenden Block erstellen, während Überlauf einen Blockformatierungskontext erstellen kann.
Nach meiner Erfahrung reicht ein tiefes Verständnis von CSS nicht aus, damit große Organisationen CSS effizient schreiben können. Während meiner Zeit bei Yahoo stand ich oft in Konflikt mit Menschen, die vor ein paar Jahren bei mir waren. Die Umwelt ist sehr grausam und erfordert sehr pragmatisch, um viele Fallstricke zu vermeiden. Wenn Sie das nächste Mal den Quellcode eines großen Projekts betrachten und etwas sehen, das Ihnen keinen Sinn ergibt, denken Sie an diesen Tweet von Nicholas Zakas:
Gehen Sie nicht davon aus, dass die Leute dumm, unwissend sind, Fehler machen, annehmen, dass sie klug sind, ihr Bestes geben und Ihnen den Hintergrund fehlt.
- Nicholas C. Zakas (@Slicknet) 10. Februar 2013
TK: Unser Homepage -Team hat ACSS gut akzeptiert, aber es lief nicht gut. Unsere erste Interaktion war das Sportteam in Santa Monica. Steve und ich haben versucht, Entwickler an einer Konferenz zu überzeugen, dass es das Richtige ist, nicht dem Prinzip der Bedenken zu treten, und dass es keine Verwirrung verursacht.
Wir haben ihnen einen kürzlichen Artikel von Nicolas Gallagher darauf hingewiesen, dass er von „Außenstehenden“ hilfreich wäre, aber nicht von! Die Dinge laufen nicht gut und es gibt viel Reibung. Das Hauptproblem ist, dass die Bibliothek aus Versorgungsklassen besteht, aber ihre Syntax hilft nicht, das Gespräch zu lindern.
Ich erinnere mich, dass ich mich mit dem E -Mail -Team getroffen habe, das sich nicht gegen die Idee von Atomic CSS einwand, aber ihre eigene JavaScript -Methode entwickeln wollte, um "normale" CSS -Deklarationen zu verwenden - weil sie ACSS -Syntax nicht bestehen konnten . Unabhängig davon, dass die Daten, die die Bibliothek unterstützen (ca. 36% Reduktion von CSS und HTML), alles von sich selbst sagen, also ist ACSS das Ende. Heute, mehr als sieben Jahre später, verwenden Yahoo Homepage, Yahoo Sports, Yahoo News, Yahoo Finance und andere Yahoo -Produkte immer noch ACSS.
Um besser zu verstehen, wie Ansätze wie ACSS -Projekte Projekte zugute kommen, bei denen die Wiederverwendbarkeit von Komponenten kritisch ist, kopieren Sie das Erschläge der Komponente von Yahoo Finance und fügen Sie sie in Yahoo News ein. Die Komponente sollte so aussehen, als ob sie zu einem Teil der Seite gehört. Dies liegt daran, dass ACS diese Komponenten unabhängig von der Seite herstellt.
TK: Wir haben zwei Sätze von "Kandidaten" identifiziert, die als Attributwert -Separatoren über mehrere Iterationen verwendet werden: Klammern () und quadratische Klammern [].
Renato erinnert sich, dass wir Klammern über quadratische Klammern ausgewählt haben, weil wir mit Funktionen in JavaScript vertraut waren, selbst auf Kosten zusätzlicher Schalttasten. Die ACSS -Syntax soll:
Es sieht so aus:
<code>[<context> [:<pseudo-class> ]<combinator> ][(<value> ,<value> ?,...)][][:<pseudo-class> ][::<pseudo-element> ][--<breakpoint_identifier> ]</breakpoint_identifier></pseudo-element></pseudo-class></value></value></combinator></pseudo-class></context></code>
Entwickler bauen ihre Klassen nach der obigen Struktur. Die Kernsyntax basiert auf dem beliebten Toolkit -Emmet. Wir verwenden die EMMET -Methode, um Merkmale zu reduzieren, da die Kernklasse ein explizites Eigenschafts-/Wertpaar ist und keine willkürliche Zeichenfolge.
Wir haben auch mehr als ein Dutzend Hilfsklassen geschaffen. Diese wenden mehrere Stildeklarationen an und sind entweder Verknüpfungen, z. B. Inhalte, die den sehbehinderten Benutzer verstecken, oder Hacks wie ClearFix mit .CF. Wir bieten Entwicklern auch mehr Freiheit, indem wir Konfigurationsdateien verwenden, in denen sie Variablen - wie PrimaryColor - Breakpoints und mehr erstellen können.
Menschen, die ACSS noch nie benutzt haben, werden Ihnen sagen, dass die Syntax (bestenfalls) zu seltsam ist, aber Menschen, die damit vertraut sind, werden Ihnen sagen, dass sie in vielerlei Hinsicht klug ist.
TK: Ich habe schon viel in verschiedenen Online -Veröffentlichungen geschrieben, daher ist es selbstverständlich, einen Artikel über diesen „herausfordernden“ Ansatz zu schreiben.
Yahoo sponserte eine Front-End-Konferenz im Oktober 2013, wo Renato eine Rede zur Einführung unserer Lösung arrangierte, und ich versuchte, diesen Artikel vorher zu veröffentlichen. Ich habe es nicht im Yahoo! Entwicklernetzwerk veröffentlichen, da die Website keinen Kommentarbereich enthält. Eine Auseinandersetzung mit einer Liste konnte sie nicht rechtzeitig veröffentlichen, aber das Smashing Magazine hat seinen Überprüfungsprozess beschleunigt, um den Artikel bis Ende Oktober veröffentlichen zu können.
Mein Ansatz zur Auswahl eines Verlags mit einem Kommentarbereich zahlte sich aus, da der Beitrag über 200 Kommentare erhielt, was für mich sehr zeitaufwändig und frustrierend war-und ich musste auf diese Kommentare antworten.
TK: Als der Artikel veröffentlicht wurde, sagte ich Vitaly [Friedman, Mitbegründer des Smashing Magazine], dass die Notiz wie eine Art Haftungsausschluss auf die Art und Weise, wie die Leute den Artikel lesen, beeinflusst haben. Aber ich habe es nicht wirklich widerlegt, weil ich Vitalys Idee verstanden habe. Ich finde diese Notiz noch interessant, und dieser Ansatz ist jetzt zum Mainstream geworden.
TK: Es gibt immer Raum für Verbesserungen, insbesondere nachdem Sie diese Lösung Pionierarbeit geleistet haben. Sie können sich nicht ansehen, was andere getan haben, um über ihre Fehler oder Mängel zu lernen. Sie haben keine verbesserten Materialien. Wenn wir also glauben, dass es uns zum ersten Mal erfolgreich gewesen wäre, wäre es eingebildet.
Wir haben umfangreiche Erfahrung mit Atomic CSS, weil wir seit über einem Jahr "statische" Stilblätter in großen Projekten verwendet haben. Aber in Bezug auf die Dynamik - Werkzeuge - scheinen wir nicht viel Inspiration zu finden. Denken Sie daran, dass die anderen Bibliotheken sechs Jahre dauerte, bis sie dem Beispiel folgen.
In Französisch sagen wir: Essuyer Les plâtres . (Staub abwischen)
Ein Fehler, den wir gemacht haben, war die Verwendung von "Atomic CSS" als Titel von ACSS.io, weil, wie John Polacek betonte, dies zu einer gewissen Verwirrung führte. Seitdem haben wir den Titel geändert.
Das einzige, was ich bedauere, ist, wie die Gemeinschaft im Laufe der Jahre Atomic CSS/ACSS behandelt hat, was kürzlich zu einem seltsamen Austausch führte, bei dem mir jemand erklärte, was „Atomic CSS“ bedeutet:
Die Atomic CSS Library [ACSS] verwendet diesen Namen, aber ich denke, er ist irreführend, weil die Funktionalität, über die Sie sprechen, die Generation von Dynamic Style ist. "Atomic CSS" ist ein häufiger Begriff, der kleine Selektoren als Atome angibt, aber statisch ist.
Sprechen Sie über das Löschen. ;))
Vielen Dank für Thierry, dass Sie an diesem Interview teilgenommen und uns erlaubt haben, es der Community zu veröffentlichen.
Das obige ist der detaillierte Inhalt vonDie Herstellung von Atomic CSS: Ein Interview mit Thierry Koblentz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So lösen Sie err_connection_reset
Windows kann nicht auf den freigegebenen Computer zugreifen
Nginx-Neustart
Verwendung der Formatierungsfunktion
Lösung für das Problem, dass die Win10-Download-Software nicht installiert werden kann
So beheben Sie den unbekannten Fehler 11
Wie man Go-Sprache von Grund auf lernt
Funktionsfunktionsverwendung
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
