John Polacek betrachtet einige Beispiele, bei denen kleine Utility-CSS-Klassen verwendet werden können, um das Layout einer Seite nach einer Methode zu gestalten, die er als „Expressive CSS“ beschreibt.
Anstatt CSS um Inhaltsmuster herum zu erstellen, könnten wir unser CSS stattdessen auf Anzeige-Mustern basieren. Expressive CSS ist ein Ansatz zum Schreiben von leichtgewichtigem, skalierbarem CSS unter Verwendung von Utility-Klassen, die einfach zu schreiben und zu verstehen sind.
Ich bin mir nicht sicher, ob John der Erste war, der den Begriff „Content Reference“ (Inhaltsreferenz) geprägt hat, aber er gefällt mir. Dort beschreibt ein Teil des CSS den Inhalt, so:
<p class="event__location">Washington D.C.</p>Und dann würden wir diesen einzelnen Hook verwenden, um alles in CSS zu stylen
.event__location {
border-top: 2px solid #eee;
font-size: 23px;
padding: 10px;
}Aber John schlägt vor, diese Stile in einzelne Module aufzuteilen, was vielleicht so aussehen würde, wobei dieselben Klassen auf verschiedenen Modulen in jedem Teil der Codebasis verwendet werden können
<p class="grid-12 l-grid-6 l-border-right m-border-bottom s-border-bottom marg-2-bottom">Washington D.C.</p>Wie John erwähnt, ist dies nicht unbedingt ein neuer Ansatz zum Schreiben von CSS, aber es ist sicherlich interessant zu sehen, wie ein anderer Entwickler seinen Coding-Stil im Laufe der Zeit und mit Erfahrung verändert hat.