Stylesheets aus HTML-Markup generieren: Bear CSS
Von: Raimund, Jonas Dieser Beitrag stellt das Tool Bear CSS zum Erzeugen von CSS-Dokumenten nach HTML-Vorlage vor.
Die meisten Webdesigner werden beim Coding einer Seite ähnlich vorgehen. Sofern nicht direkt ein Template (z.B. Boilerplate) zum Einsatz kommt, schreibt man zunächst das HTML-Markup. Wenn die HTML-Struktur steht, wird die CSS-Datei angelegt und alles über das Stylesheet gestaltet.
Wenn auch ihr Websites nach diesem Muster umsetzt, kann Bear CSS euren Workflow spürbar beschleunigen.
Was macht Bear CSS?
Bear CSS generiert CSS-Dokumente auf Grundlage einer HTML-Struktur. Nachdem Ihr das HTML-Gerüst erstellt habt, ladet ihr die Datei nach Bear CSS hoch und erhaltet als Ergebnis eine CSS-Datei, die alle notwendigen Selektoren bereits beinhaltet.
Wenn Ihr diese Beispiel-Datei verwendet:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Titel der Seite</title>
</head>
<body>
<div id="container">
<header> </header>
<article class="content"></article>
<footer></footer>
</div>
</body>
</html>Erhaltet ihr im Austausch folgendes CSS-Dokument:
html { }
body { }
/*******************************************************************
LAYOUT
*******************************************************************/
div { }
#container { }
header { }
footer { }
article { }
.content { }
Geschrieben von:
Raimund Büchner
Gerade ausprobiert und schade: Verschachteln muss man trotzdem noch und was die Sortierung betrifft ist es einfach der Reihe nach gelistet – dabei könnten Styles für Klassen in Paragraphen einfach an den Anfang gestellt und Divs nacheinander sortiert werden.
Guter Tipp! Danke!
Danke für den Tipp! Ist bestimmt ganz nützlich