Entwicklung & Design

CSS-Templates automatisch generieren mit BearCSS

Das kostenlose Online-Tool BearCSS ist eine große Hilfe dabei, Styles aus HTML-Dateien in eine separate CSS-Datei auszulagern. Es liest automatisch alle Style-Elemente einer bestehenden HTML-Seite aus und erstellt eine CSS-Datei, die dann heruntergeladen werden kann. Wir stellen Euch BearCSS kurz vor.

BearCSS Webseite

Elegante CSS-Styles auf Knopfdruck

Es ist nicht immer einfach, den effektivsten Weg bei der Webentwicklung zu finden. Man beginnt mit einer einzigen HTML-Datei, die den gesamten Quellcode enthält. So ist es oft mühselige Fleißarbeit, alle Styles nachträglich als ordentliches CSS-Template auszulagern. Mit BearCSS lässt sich in drei einfachen Schritten aus einer bestehenden HTML-Datei ein solides CSS-Template generieren, dass alle definierten HTML-Elemente, Klassen und IDs enthält. Man lädt seine HTML-Datei einfach hoch, das CSS-Template wird automatisch von BearCSS erzeugt und kann dann als einzelne CSS-Datei heruntergeladen werden.

BearCSS wurde von den beiden Belfaster Studenten Kyle Gawley und Jordan Henderson mit Hilfe der Webentwicklungsumgebung Coda für Mac entwickelt. Technisch basiert BearCS auf HTML5, CSS, jQuery und PHP.

BearCSS mag nicht für jeden Workflow geeignet sein. Aber das Tool kann sehr viel Zeit sparen, wenn man aus HTML nachträglich auf Knopfdruck gut strukturierte CSS-Templates erzeugen möchte.

Weiterführende Links:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

10 Kommentare
Martin

Kurzer Artikel der mir den Sinn dieses Tools nicht wirklich beschreibt.

Wer Arbeitet nicht gleich so, HTML -> CSS Datei?

Habe ich das richtig verstanden, wenn ich die klassen und div´s in der HTML styles angebe, das dieses Tool dann eine CSS Datei erstellt – das wars?

Antworten
Markus
Markus

hab ich schon vor ca. 2 Wochen getestet… net so dolle :)
mach doch lieber mein eigenes zeug

Antworten
belearas
belearas

Ja aber warum schreibt man sowas nicht gleich in eine css Datei? Wer arbeitet denn wirklich so??

Wäre das selbe wenn jemand eine Anleitung erstellt, wie entfernt man Fäkalien am WC weil man zu faul war um zu spülen *rolleyes*

Antworten
reraiseace

Die Seite bringt nur nachträglich was, wenn ein Projekt vorliegt, welches mit Inline-CSS gecodet wurde. Sonst sehe ich da keine Verwendung für. Normal trennt man HTML und CSS gleich voneinander. Wer ein CSS Framework verwendet, wird da auch nicht drum rum kommen.

Naja ich stell meinen PC auch gleich neben den Kühlschrank ;)

Antworten
Michael - der aus Berlin

@reraiseace das würde ja nur dann was bringen wenn das tool auch inlinestyles auslesen würde. Aber das tut das Tool ja scheinbar auch nicht. Auf jeden Fall keine CSS Styles aus dem HEAD die mit eingebunden wurden. Von daher erschliesst sich mir generell kein Sinn warum man auf dieses Tool setzten sollte, bzw. wo überhaupt der Mehrwert liegt.

Antworten
Timo
Timo

Ich kenne wirklich niemanden, der so einen Workflow hat. Erst HTML mit Inline-CSS? Macht doch schon aufgrund sich wiederholender Klassen keinen Sinn, oder verstehe ich da was falsch?

Was den Artikel angeht:
Ich gehe mal davon aus, dass der Link am Ende der Seite eigentlich direkt zur Bear CSS Seite führen sollte und nicht auf den Originalartikel von thenextweb.com.
Nun ist es aber doch passiert und mir fällt auf, dass Frau Steinberg den englischen Originaltext von Harrison Weber nahezu eins zu eins ins Deutsche übersetzt hat.
Kann man machen, dann aber bitte mit Hinweis auf die Quelle/den Autor. So ist das ist meiner Meinung nach journalistisch nicht in Ordnung.

Antworten
ernstzunehmend

Vielleicht nicht die beste Anwendung im Web, weil Inline CSS so was von 2001 ist, aber ein Blick auf die Internetseiten der Jungs zeigt nicht nur zwei schöne Seiten, sondern auch zwei Projekte die sich wohl noch in einer geschlossenen Beta Phase befinden, aber interessant klingen. Zum einen ein „online scrapbooking tool“ und zum anderen ein „Event promotion & ticketing“ Service. Kann man mal im Auge behalten.


Links:
Kyle Gawley: http://kylegawley.co.uk/

Antworten
reraiseace

@Michael – der aus Berlin
Mhm, okay. Dann vermutlich nur CSS welches im body steht. Das kann bei alten Webseiten aber öfter noch der Fall sein. Wenn BearCSS keine Styles aus dem head ausliest ist es nochmal unbrauchbarer für die meisten. Die Idee könnte besser sein, muss vielleicht nur noch zu Ende gedacht werden.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.