Erfahren Sie mehr über die CSS -Architektur: Atomic CSS - SitePoint

Die folgenden Auszüge stammen aus dem Buch "CSS Master" von Tiffany Brown. Dieses Buch ist in wichtigen Buchhandlungen auf der ganzen Welt erhältlich und Sie können die E-Book-Version hier auch kaufen.

Wenn Bem der Liebling in der Branche ist, dann ist Atomic CSS sein rebellischer Trendsetter. Yahoo's Thierry Koblentz nannte und erklärte Atomic CSS in seinem Artikel von 2013, der CSS Best Practices in Frage stellte, die eine kompakte Bibliothek mit Klassennamen verwendet. Diese Klassennamen werden normalerweise abgekürzt und sind nicht mit dem, was sie auswirken, nicht in Kontakt. Im Atomic CSS -System können Sie jedoch wissen, wie der Klassenname es tut.

Verwenden wir ein Beispiel, um zu veranschaulichen. Im Folgenden finden Sie eine Reihe von Regeln, die wir als traditionelle CSS -Architektur bezeichnen können. Diese Regelsätze verwenden den Klassennamen, der den Inhalt ihrer Anwendung beschreibt: das globale Nachrichtenfeld und den Stil des Erfolgs, der Warnung und der Fehlermeldungsfelder:

<code>.msg {
  background-color: #a6d5fa;
  border: 2px solid #2196f3;
  border-radius: 10px;
  font-family: sans-serif;
  padding: 10px;
}
.msg-success {
  background-color: #aedbaf;
  border: 2px solid #4caf50;
}
.msg-warning {
  background-color: #ffe8a5;
  border-color:  #ffc107;
}
.msg-error {
  background-color: #faaaa4;
  border-color: #f44336;
}</code>

Beobachten Sie "Beobachten Sie ein CSS -Held des Büros: CSS -Architektur -Tipps" und lernen Sie, strukturierte, wartbare und skalierbare CSS zu bauen! Zeigen Sie diesen Kurs anzeigen Sie diesen Kurs an, um ein Fehlermeldungsfeld zu erstellen. Wir müssen dem Klassenattribut des Elements sowohl MSG- als auch MSG-Error-Klassennamen hinzufügen:

<code><p class="msg msg-error">发生错误。</p></code>

Vergleichen wir es mit einem Atomsystem, bei dem jede Deklaration zu einer eigenen Klasse wird:

<code>.bg-a {
  background-color: #a6d5fa;
}
.bg-b {
  background-color: #aedbaf;
}
.bg-c {
  background-color: #ffe8a5;
}
.bg-d {
  background-color: #faaaa4;
}
.bc-a{
  border-color: #2196f3;
}
.bc-b {
  border-color: #4caf50;
}
.bc-c {
  border-color:  #ffc107;
}
.bc-d {
  border-color:  #f44336;
}
.br-1x {
  border-radius: 10px;
}
.bw-2x {
  border-width: 2px;
}
.bss {
  border-style: solid;
}
.sans {
  font-style: sans-serif;
}
.p-1x {
  padding: 10px;
}</code>

Die Menge an CSS -Code hat erheblich zugenommen. Lassen Sie uns nun unsere Fehlermeldungskomponente neu erstellen. Mit Atomic CSS wird unser Tag:

<code><p class="bw-2x bss p-1x sans br-1x bg-d bc-d">发生错误。</p></code>

unsere Markierungen sind auch länger. Aber was passiert, wenn wir eine Warnmeldungskomponente erstellen?

<code><p class="bw-2x bss p-1x sans br-1x bg-c bc-c">警告：该商品价格已更改。</p></code>

Die beiden Klassennamen haben sich geändert: BG-D und BC-D werden durch BG-C und BC-C ersetzt. Wir haben fünf Regelsätze wiederverwendet. Erstellen wir nun eine Schaltfläche:

<code><button type="button" class="p-1x sans bg-a br-1x">保存</button></code>

schau! Hier haben wir vier Regelsätze wiederverwendet und es vermieden, unseren Stylesheets weitere Regeln hinzuzufügen. In einer starken Atom -CSS -Architektur muss neue HTML -Komponenten (z. B. die Post -Sidebar) hinzugefügt werden, muss nicht mehr CSS hinzufügen (obwohl in der Realität möglicherweise einige hinzugefügt werden müssen). Atomic CSS ist ein bisschen wie die Verwendung von Dienstprogrammklassen in CSS, aber es wird extrem genommen. Insbesondere:

• Halten Sie CSS präzise, ​​indem Sie hochkörnige, hoch wiederverwendbare Stile erstellen, anstatt einen Regelsatz für jede Komponente zu erstellen
• reduzieren spezifische Konflikte durch Verwendung niedriger spezifischer Selektorsysteme
stark
• Sobald der Anfangsregelsatz definiert ist, können HTML -Komponenten schnell entwickelt werden

Atomic CSS ist jedoch nicht ohne Kontroversen.

Argumente gegen Atomic CSS

Atomic CSS widerspricht fast allem, was wir über das Schreiben von CSS gelernt haben. Es fühlt sich fast so schlimm an wie das Einfügen von Stilattributen überall. Tatsächlich ist dies einer der Hauptkritikpunkte des Atomic CSS -Ansatzes: Es verwischt die Grenze zwischen Inhalt und Leistung. Wenn Sie ein Element nach links schweben und einen Rand von zehn Pixeln hinzufügen, was sollten Sie dann tun, wenn wir nicht mehr wollen, dass das Element nach links schwebt?

Eine Antwort ist natürlich, die FL -Klasse aus unserem Element zu entfernen. Aber jetzt ändern wir die HTML. Der gesamte Grund für die Verwendung von CSS ist, dass Tags nicht von der Leistung beeinflusst werden und umgekehrt. (Wir können dieses Problem auch lösen, indem wir die .fl {float: links;} Regel aus dem Stylesheet entfernen, obwohl dies alle Elemente mit dem Klassennamen FL betrifft). Die Aktualisierung von HTML kann jedoch ein kleiner Preis für ein saubereres CSS sein.

In Kobleentz 'ursprünglichem Artikel verwendete er Klassennamen wie .M-10 (Margin: 10px) und .P-10 (Polsterung: 10px). Die Probleme mit dieser Namenskonvention sollten offensichtlich sein. Wenn Sie zu einem Fünfpixel- oder 20-Pixel-Rand wechseln, müssen wir unsere CSS und HTML aktualisieren, da der Klassenname ansonsten seinen Effekt nicht genau beschreibt.

Verwenden von Klassennamen wie P-1x (wie in diesem Abschnitt gezeigt) kann dieses Problem lösen. Der 1x -Teil des Klassennamens repräsentiert das Verhältnis, nicht die definierte Anzahl von Pixeln. Wenn die Basisfüllung fünf Pixel beträgt (d. H. P-1x {Padding: 5px;}), setzt .P-2x die zehn Pixelfüllung. Ja, dies beschreibt nicht ganz, wie der Klassenname tut, aber es bedeutet auch, dass wir das CSS ändern können, ohne die HTML zu aktualisieren oder irreführende Klassennamen zu erstellen.

Das Atomic CSS -Schema hindert uns nicht daran, den Klassennamen zu verwenden, der den Inhalt in unseren Tags beschreibt. Sie können weiterhin .button-close oder .Accordion-Trigger zu Ihrem Code hinzufügen. Dieser Klassenname eignet sich besser für JavaScript- und DOM -Operationen.

BEM- und Atom -CSS

BEM funktioniert am besten, wenn eine große Anzahl von Entwicklern parallel CSS- und HTML -Module bauen. Es hilft, Fehler und Fehler zu verhindern, die von großen Teams erstellt wurden. Es skaliert gut, teilweise, weil die Namenskonvention beschreibend und vorhersehbar ist. BEM ist für große Teams nicht

nur ;

Atomic CSS funktioniert besser, wenn ein kleines Team oder ein Ingenieur für die Entwicklung einer Reihe von CSS -Regeln verantwortlich ist, und ein größeres Team baut eine vollständige HTML -Komponente auf. Mit Atomic CSS können Entwickler den Satz der Klassennamen bestimmen, die von einem bestimmten Modul einfach gefordert werden, indem sie den Style Guide oder den CSS -Quellcode betrachten.

FAQs über Atomic CSS

Was ist der Hauptunterschied zwischen Atom -CSS und traditionellem CSS?

atomare CSS, auch als funktionales CSS bezeichnet, ist ein Weg, um einen Stil in atomare oder unteilbare Fragmente zu unterteilen. Jede Klasse macht nur eine Sache, die so einfach sein kann, wie Ränder festzulegen oder die Schriftfarbe zu ändern. Auf der anderen Seite beinhaltet traditionelle CSS normalerweise das Erstellen von bestimmten Klassen für bestimmte Elemente, was zu Stylesheet -Blähungen und spezifischen Konflikten führen kann. Atomic CSS verbessert die Wiederverwendbarkeit und kann sauberer erzeugen und die Code leichter aufrechterhalten.

Wie verbessert Atomic CSS die Leistung?

Atomic CSS kann die Leistung erheblich verbessern, indem die Größe des Stylesheetes reduziert wird. Da jede Klasse nur eine Sache tut, gibt es in CSS weniger Duplizierung. Dies kann zu kleineren Dateigrößen führen, dh schnellere Ladezeiten für Benutzer.

Ist Atomic CSS für große Projekte geeignet?

Ja, Atomic CSS ist besonders vorteilhaft für große Projekte. Es verbessert die Konsistenz und Wiederverwendbarkeit, wodurch Ihre Codebasis erleichtert werden kann. Es erfordert jedoch eine Änderung der Denkweise und ist möglicherweise nicht für jedes Team oder Projekt geeignet.

Was sind einige häufige Kritikpunkte an Atom -CSS?

Einige Kritiker glauben, dass Atom -CSS zu langwierigem und schwer zu lesenes HTML führen kann, da jedes Element mehrere Klassen haben kann. Andere befürchten, dass es die Trennung von Bedenken bricht, da die Stilinformationen jetzt mit Ihrem Markup gemischt werden. Befürworter von atomarem CSS glauben jedoch, dass diese Bedenken durch die Vorteile des Reinigers und des leichteren Aufrechterhaltens von Code ausgeglichen werden.

Wie fange ich in meinem Projekt mit Atomic CSS an?

Es gibt mehrere Bibliotheken, mit denen Sie mit Atomic CSS wie ACS, Tachyons und Rückenwind -CSS beginnen können. Sie können auch mit der Einbeziehung von Atom -CSS -Prinzipien in Ihr eigenes Stylesheet einbeziehen, indem Sie den Stil in atomare, wiederverwendbare Klassen einteilen.

Können Atom -CSS mit Präprozessoren wie Sass oder weniger verwendet werden?

Ja, Atom -CSS können mit CSS -Präprozessoren wie Sass oder weniger verwendet werden. Es ist jedoch wichtig, sich daran zu erinnern, dass Atom -CSS eine Methode ist, kein spezifisches Werkzeug oder ein spezifisches Rahmen. Es geht darum, wie Sie Ihre CSS erstellen und organisieren, nicht die Tools, mit denen Sie es schreiben.

Ist Atomic CSS mit CSS -Frameworks wie Bootstrap kompatibel?

Ja, Atom -CSS können mit CSS -Frameworks wie Bootstrap verwendet werden. Einer der Hauptvorteile von Atom -CSS besteht jedoch darin, dass die Notwendigkeit großer, aufgeblähter Rahmenbedingungen durch Verbesserung der Wiederverwendbarkeit und Einfachheit reduziert wird.

Wie geht Atomic CSS mit reaktionsschnellem Design um?

Atomic CSS können reaktionsschnelle Designs mithilfe von Klassen für bestimmte Bildschirmgrößen verarbeiten. Zum Beispiel haben Sie möglicherweise eine Klasse, die Rand auf einem großen Bildschirm festlegt, und eine andere Klasse, die verschiedene Ränder auf einem kleinen Bildschirm festlegt.

Können Atom -CSS mit JavaScript -Frameworks wie React oder Vue verwendet werden?

Ja, Atom -CSS können mit JavaScript -Frameworks wie React oder Vue verwendet werden. In der Tat finden einige Entwickler Atomic CSS diese Frameworks gut als Anwaltskomponenten-basierte Architekturen.

Was sind die Ressourcen, um mehr über Atomic CSS zu erfahren?

Es gibt viele Ressourcen, um mehr über Atomic CSS zu erfahren. Einige empfohlene Ressourcen umfassen ACSS-Websites, CSS-Tricks sowie verschiedene Artikel und Tutorials in mittleren und anderen Codierungsblogs.

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über die CSS -Architektur: Atomic CSS - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!