CSS Kurs Contao Teil 4

Teil 4:
7 Contao-Experten stellen ihre CSS-Workflows vor

Für den vierten Teil unserer Artikelserie CSS-Kurs für Contao haben wir euch gefragt, wie sieht euer CSS-Workflow aus? Welche Tools nutzt ihr und warum?

Es gibt heute so viele Arten CSS für Contao zu schreiben. Über den contaoeigenen CSS-Editor oder doch lieber mit einem externen Programm? Lokal oder Remote? Mit einem Präprozessor und wenn ja, mit welchem?

7 Contao-Experten haben sich die Zeit genommen und uns ihren CSS-Workflow beschrieben:

Peter Mueller

Peter Müller

E&F: Arbeitest du mit dem contaoeigenen oder einem externen Editor?

Peter: Mal so, mal so.

Anfangs habe ich als passionierter CSS-Schreiberling nur externes CSS geschrieben. Bei meinem Vortrag über Contao und CSS, 2010 war das glaube ich, konnte ich nicht wirklich verstehen, wie jemand damit effektiv arbeiten kann.

Andreas Schempp hat gesagt, dass das durchaus ginge, und in der dritten Auflage vom Contaobuch, 2012 war das dann, habe ich den internen Editor ausführlich vorgestellt. Für Leute, die mit CSS nicht so firm sind, ist er sowieso einen Riesenhilfe, aber auch für CSS-Schreiber.

Man muss sich halt nur umgewöhnen. Mehrere Stylesheets, Kategorien verwenden und so weiter und so fort.

E&F: Was hat deine Entscheidung beeinflusst?

Peter: Das ist bei mir projektabhängig:

  • little-boxes.de ist externes CSS (YAML, das war 2009),
  • pmueller.de ist mit dem internen Editor geschrieben (und dem Contao-Grid, was ich definitiv nicht noch einmal machen würde...),
  • groningen-info.de basiert auf dem 80/20-Theme von RockSolid (SASS, und externes CSS).

E&F: Nutzt du einen Präprozessor?

Peter: Nein. Es sei denn, du bezeichnest den internen CSS-Editor als Präprozessor, was er in gewisser Weise ja durchaus ist.

„Ich habe lange überlegt, ob ich SASS lernen sollte oder nicht …“

Ich habe lange überlegt, ob ich SASS lernen sollte oder nicht, weil ein Präprozessor quasi die logische Fortsetzung von CSS ist, aber ich habe mich letztlich dagegen entschieden. Der Aufwand, eine zusätzliche Syntax zu lernen, lohnt sich m. E. nur für Entwickler, die mehr oder weniger täglich CSS schreiben, und das tue ich nicht.

E&F: Bist du mit deinem Workflow zufrieden?

Peter: Yep. Aber das hängt auch damit zusammen, dass ich nicht täglich damit beschäftigt bin. Contao ermöglicht mir eine sehr effektive Verwaltung der Inhalte auf meinen Websites.

E&F: Welche Änderungen/Funktionen würdest du Dir für die Zukunft wünschen?

Peter: Ich würde mir von Contao wünschen, dass es bei der Verwaltung der Inhalte ähnlich flexibel wird wie WordPress mit seinen Kategorien. Automatisch erzeugte Tag- und Kategorieseiten (wie z. B. alle Artikel eines Autoren) und dergleichen.

Und zwar ohne dabei Inhaltselemente oder Seitenstruktur einzubüßen oder gleich mit MetaModels ran zu müssen.

Wie das genau gehen soll weiß ich aber auch nicht, sonst hätte ich schon was vorgeschlagen ;-)

Über Peter:

Peter Müller ist Autor von Video-Trainings und Fachbüchern zu diversen Webthemen, lebt in Groningen (NL) und arbeitet als Dozent überwiegend im Norden der Bundesrepublik. Seine Spezialität ist es, komplizierte und trockene Sachverhalte auf einfache und unterhaltende Weise darzustellen. Bekannt ist er durch seine Einführungen zu CSS und zu Contao. Mehr Infos

Andreas Schempp

Andreas Schempp

E&F: Arbeitest du mit dem contaoeigenen oder einem externen Editor?

Wir arbeiten ca. zu 90% mit dem internen Editor, ansonsten mit PhpStorm.

E&F: Was hat deine Entscheidung beeinflusst?

Die Nutzung ist abhängig vom Kunden bzw. System. Wir entwickeln ja meist Webseiten für andere Agenturen. Die meisten dieser Systeme sind kleine Seiten, bei welchen wir keine Versionskontrolle (GIT) einsetzen. Entsprechend haben wir auch keine Verwaltung für die CSS-Dateien. Der interne Editor bietet hier den Vorteil, dass alle ohne Versionskonflikte auf das CSS zugreifen können. Zudem können unsere Kunden (die Agenturen) auch mit begrenzten CSS-Kenntnissen noch kleine Anpassungen vornehmen (z.B. mal ne Farbe ändern).

„Externe CSS-Dateien verwenden wir dann, wenn das System versioniert ist (GIT).“

Nur damit lassen sich sinnvoll Szenarien wie Dev-/Staging-/Production-Strategien realisieren. In einem VC-System gibt es von den Dateien immer auch eine lokale Version welche mit PhpStorm editiert werden kann, da PhpStorm ja keine FTP-Direktbearbeitung erlaubt.

E&F: Nutzt du einen Präprozessor?

Nein, abgesehen von einem FileWatcher in PhpStorm der automatisch CSS und JS minimiert (Uglify).

E&F: Warum nicht?

Für die wenigen Fälle ohne internen Editor optimiere ich das CSS lieber von Hand. Aus meiner Sicht verleitet LESS/SASS zu „unschönem“ CSS, weil es ja sehr einfach ist viel Code zu generieren. Ich verwende beispielsweise auch keine Reset-Stylesheets oder sonstige Vorlagen. Designs unserer Kunden kommen oft von verschiedenen Grafikern und verwenden nicht dieselben Elemente. Entsprechend bringen Mixins beispielsweise für eine Standard-Formular-Gestaltung wenig.

Ich muss aber auch zugeben dass ich mich nie ausführlich damit beschäftigt habe ;-)
Genauso geht es mir aber auch mit Frameworks wie Bootstrap/Foundation/YAML. Wenig damit beschäftigt, mag aber auch die Tatsache nicht dass man sich 1000 „Möglichkeiten“ reinlädt und dann nur 10% nutzt. Da schreib ich die 10% lieber selber.

E&F: Bist du mit deinem Workflow zufrieden?

Klar, sonst hätte ich ihn schon geändert ;-)

E&F: Welche Änderungen/Funktionen würdest du Dir für die Zukunft wünschen?

Bezogen auf CSS in Contao fällt mir da eigentlich nichts ein. Mir gefällt das sehr simple Framework-Stylesheet von Contao, dass sinnvolle „Grundlagen“ vorgibt. Seit man mit Contao 3.3 auch die Standard-Responsiveness entfernen kann, passt für mich alles (wieder) ;-)

Über Andreas:

Andreas Schempp arbeitet seit 2008 mit Contao und gehört mittlerweile sowohl zum Contao 3 als auch zum Contao 4 Entwicklungsteam. 2012 gründete er gemeinsam mit Yanick Witschi terminal42 und kann auf über 100 Erweiterungen u.a. die Shop-Erweiterung Isotope eCommerce für Contao zurückblicken. Mehr Infos

Thomas Weitzel

Thomas Weitzel

E&F: Arbeitest du mit dem contaoeigenen oder einem externen Editor?

Thomas: Am Anfang – vor 7 Jahren – immer gerne mit dem internen Editor. Mittlerweile, seit Version 3 von Contao, nur noch mit externen CSS-Dokumenten.

E&F: Was hat deine Entscheidung beeinflusst?

Thomas: Bis zur letzten 2.11er Version von Contao konnte man die Erweiterung „CSS-Editor“ nutzen, also direkt CSS da rein zu schreiben, was ich dann als deutlich schneller während des Arbeitens empfand. Da die Erweiterung nicht weiter gepflegt wurde, war dann mit der 3er Version von Contao die Verwendung von externen CSS-Dokumenten die erste Wahl. Ab in die Dateiverwaltung und dort direkt bearbeitet.

Mit Syntax-Highlighting ist das prima… aber irgendwie wars mir zu eng. Also den Codeeditor in den Persönlichen Einstellungen ausgeschaltet und nun ein skalierbares Feld im Backend. Aber Syntax-Highlighting wäre schon irgendwie toll?

Im Mai letzten Jahres bin ich dann nach 10 Jahren Abstinenz wieder zum Mac zurückgekehrt und habe dort nun mit Espresso einen tollen Editor, der Syntax-Highlighting unterstützt und mit dem ich nun quasi direkt auf dem Server arbeiten kann. Toll ist dabei auch: es wird die CSS-Syntax automatisch ergänzt, was dann schon das Tempo beim Schreiben erhöht. Zudem sieht man schneller, wenn man z. B. eine schließende } vergisst – wo man sonst ewig sucht… .

E&F: Nutzt du einen Präprozessor?

Thomas: Nein, das habe ich bisher noch nicht im Einsatz. Schon einiges dazu gelesen und auch schon experimentiert… Bisher war die „gezwungene” Notwendigkeit einfach noch nicht da.

E&F: Bist du mit deinem Workflow zufrieden?

Thomas: Aktuell ja. Ich denke im Teamwork-Workflow könnte ich dann nachlegen – so bin ich an den meisten Seiten meist alleine für das CSS zuständig und komme damit meist zügig ans Ziel. Ein bisschen hängt das sicher auch davon ab, wie jeder seine Websites aufbaut. Ich erstelle oft die Seiten mit Modulen und Testinhalten.

Habe damit quasi ein interaktiven Dummy und arbeite dann mit zwei Bildschirmen: rechts das Frontend und links den Inspektor (z.B. den von Firefox). Dort schreibe ich dann meine CSS und sehe auf der rechten Seite gleich das Ergebnis. Das CSS übernehmen ich dann in meine externe CSS-Datei und speichere diese ab und kann dann nach einem Reload gleich das Ergebnis ansehen und dann anpassen.

Wenn ich nun meinen Workflow anhand deiner zwei Folgen zu „CSS und Contao” betrachte, merke ich: Doch manche Gewohnheit, die ich mal überdenke sollte :-).

E&F: Welche Änderungen/Funktionen würdest du Dir für die Zukunft wünschen?

Thomas: Manchmal dachte es wäre toll wir hätten die Möglichkeiten „einfach” andere CSS-Frameworks einzubinden, die dann alle Contao-Klassen adaptieren und anpassen. Dazu gibt es auch schon eine Erweiterung von Yanick Witschi [Contao CSS Class Replacer].

„Es bleibt weiter spannend oder:
Auch CSS ist komplexer geworden.“

Über Thomas:

Thomas Weitzel, Diplom-Designer, setzt seit 2006 Websites mit Contao um. Er hat zwei Bücher zu Contao geschrieben und engagiert sich mit Workshops & Vorträgen auf Community-Events. Er betreut die Contao-Partner, schreibt News und ist für die „Best Practice mit Contao” zuständig. Er fotografiert gerne und genießt immer gerne einen Espresso. Mehr Infos

 

Marc Reimann

Marc Reimann

E&F: Arbeitest du mit dem contaoeigenen oder einem externen Editor?

Marc: Ich arbeite in der Regel mit einem externen Editor. Der Interne Editor ist mir einfach zu langsam und umständlich. Werte die ich selber immer noch nachschauen muss, müsste ich eh in dem Eigenen CSS Bereich unterbringen.

E&F: Was hat deine Entscheidung beeinflusst?

Marc: Da ich seit Jahren mit dem CSS-Framework YAML gearbeitet habe, war das Contao-Framework nicht wirklich eine alternative für mich. Mir ist es bisher immer noch zu unflexibel. Die Reihenfolge der Spalte kann man darüber nicht einfach selber bestimmen und die block-Klasse überall hat mich bisher auch eher behindert als das sie genutzt hätte.

„Inzwischen bin ich dabei meinen Workflow komplett umzustellen und nicht mehr komplette Frameworks zu nutzen.“

Dadurch ist es dann auch einfacher für mich mein CSS den Contao-Klassen anzupassen, wenn ich das möchte.

E&F: Welchen Präprozessor nutzt du und warum?

Marc: Ich nutze SASS mit der SCSS Syntax. Ich hatte mich lange dagegen gesträubt einen Präprozessor einzusetzen, da mir das immer Umständlich vorgekommen ist und ich die Syntax nicht erst neu lernen wollte.

Die Entwicklung von Präprozessoren habe ich mir trotzdem recht genau angeschaut und verfolgt, da mich das Prinzip dann schon gereizt hat. Nachdem ich dann einmal SCSS ausprobiert hatte, war ich restlos begeistert. Endlich konnte ich eine Menge Zeit sparen und mir viel Tipparbeit ersparen. Als dann auch noch YAML eine SCSS-Vorlage hatte war ich mir sicher, das ich bei SCSS bleiben würde.

E&F: Wie werden deine SASS-Dateien weiterverarbeitet?

Marc: Im Moment lasse ich mir mein CSS von PHPStorm erzeugen und direkt hochladen. Ich binde dann nur noch die fertig komprimierte CSS-Datei über das Seitenlayout als externe-Datei ein. Ich bin dadurch nicht darauf angewiesen, ob alle Funktionen o.ä. welche ich nutze von Contao unterstützt werden. Ich kann also auch Compass in vollem Umfang nutzen.
Wobei ich gerade dabei bin mich umzustellen und Compass eh nicht mehr nutzen möchte.

E&F: Was schätzt du an SASS, welche Funktionen nutzt du?

Marc: Ich schätze eigentlich so ziemlich alles daran. Die Variablen, das Verschachtel für besser Organisierten Code und die vielen Mixins. Besonders praktisch finde ich auch die vielen Mixins und Beispiele im Internet. Irgendwo hat sicher schon irgendjemand etwas geschrieben, was mir die Sache vereinfacht. Zusätzlich ist es viel viel einfacher auch einen Vertikalen Rhythmus beizubehalten, wenn man die ganzen Rechenoperationen nutzt.

An sich hat sich mein Workflow dadurch stark vereinfacht, da jetzt alles auf einmal gemacht wird und ich nicht alles mühselig von Hand machen muss:

  • Berechnung von Schriftgrößen
  • Automatisches Präfixing
  • Komprimieren
  • usw.

E&F: Bist du mit deinem Workflow zufrieden?

Marc: Jain, optimieren kann man immer ;-)

E&F: Welche Änderungen/Funktionen würdest du Dir für die Zukunft wünschen?

Marc: Aktuell bin ich dabei meine Grundlagen komplett zu ändern. Anstelle eines CSS-Frameworks möchte ich in Zukunft nur noch die Grundsätzlichen Tools nutzen:

  • Eine vorgefertigte Normalize (direkt mit Schriftgrößen und Vertikalem Rhythmus)
  • Susy als Grid-System (damit ich für das jeweilige Projekt das passende Grid zur Verfügung habe und ich mich nicht mehr dem Grid-System anpassen muss)
  • Autoprefixer (Automatisch anhand von 'Can I use' wird bestimmt ob überhaupt noch ein Prefix sinnvoll ist)
  • SCSS-Lint, damit meine SCSS-Dateien automatisch aufgeräumt werden bzw. damit ich sehe wo ich noch mal den Code per Hand verbessern muss

Über Marc:

Marc Reimann ist seit 2005 im Bereich Webdesign- und Entwicklung selbstständig tätig. Seit 2008 ist er unter dem Nick MacKP im Forum aktiv, vielen aber eher als "Contao-Yoda" bekannt. Mehr Infos

Andreas Isaak

Andreas Isaak

E&F: Arbeitest du mit dem contaoeigenen oder einem externen Editor?

Andreas: Ich arbeite seit Jahren ausschließlich mit externen Editoren, derzeit mit PhpStorm und kenne den internen Editor nur von kurzen Expeditionen und Versuchen sich daran zu gewöhnen oder von Vorträgen auf Contao Konferenzen.

E&F: Was hat deine Entscheidung beeinflusst?

Andreas: Ich wurde mit dem internen Editor nie warm. Es ist für mich eigenartig CSS in Form von Inputfeldern, Dropdowns oder Textareas zu erstellen.

E&F: Welchen Präprozessor nutzt du und warum?

Andreas: Ich nutze seit fast zwei Jahren SCSS, weil ich es damals als ersten Präprozessor kennen gelernt habe und seit dem keinen Sinn darin gesehen habe umzusteigen. Stylus war mir bis vor kurzem noch zu unfertig und es fehlten einfach sinnvolle und ausgereifte SCSS-Frameworks wie Bourbon oder Neat unter SCSS. LESS habe ich mir nicht genauer angesehen.

E&F: Wie werden deine SASS-Dateien weiterverarbeitet?

Andreas: Ich generiere meine CSS-Datei mittlerweile mit einem Grunt-Task der eine Bourbon-Integration beinhaltet und mit weiteren Tasks wie Styledown, LiveReload undAutoprefixer ausgestattet ist. Kennengelernt habe ich Grunt bei meinem jetzigen Arbeitgeber und habe die Gruntfile.js auf meine Bedürfnisse in Contao anpassen und verfeinern können.

Die generierte CSS-Datei wird am Ende einfach in Contao an die Seitenlayouts geheftet. Dadurch halte ich mein Contao schlank und kann mittlerweile auch auf Extensions wie theme+ oder die eigene Contao-Integration von SCSS verzichten.

E&F: Was schätzt du an SASS, welche Funktionen nutzt du?

Andreas: Am Anfang habe ich viele Mixins in Form der Compass Bibliothek genutzt und auch geschätzt. Aber durch die Abhängigkeit zu RubySASS und weil es immer langsamer wurde, bin ich auf libsass umgestiegen und nutze seit dem Bourbon. Mittlerweile nerven mich viele Mixins aber sofern sie nur z.B. für das Präfixen von Funktionen wie „transform“ sind. Daher der Einsatz von Autoprefixer.

„Für Projekte schreibe ich mittlerweile viele Functions und Mixins selbst - das ist für mich der Hauptvorteil eines Präprozessers.“

Das Präfixen könnte man auch anders hinbekommen - die gewaltige Möglichkeit z.B. auch mathematische Berechnungen (für die Generierung von Graphen) innerhalb des CSS anzustellen, möchte ich aber nicht mehr missen.

E&F: Bist du mit deinem Workflow zufrieden?

Andreas: Mittlerweile bin ich sehr zufrieden damit. Mein Grunt erledigt alle kleinen Aufgaben für mich und ich kann mich auf das Schreiben von (S)CSS konzentrieren und bin dadurch um ein vielfaches schneller als vorher. Ich probiere zwar hin und wieder neue Tasks aus und übernehme manche in mein Toolkit, andere fliegen dafür raus. Mein Basispaket bleibt aber in der Regel immer gleich und leistet gute Dienste.

E&F: Welche Änderungen/Funktionen würdest du Dir für die Zukunft wünschen?

Andreas: Es existieren noch etliche Bugs in libsass, die ich gerne noch gelöst sehen würde. Aber ansonsten bin ich derzeit wunschlos glücklich. Auch die Integration in Contao funktioniert seit der Version 3.x wunderbar - ich habe nichts zu meckern.

Über Andreas:

Andreas Isaak ist seit über 8 Jahren Frontend-Entwickler. Er arbeitet als solcher in einer Detmolder Agentur (Ostwestfalen/Lippe) und ist beruflich neben dem Frontend hauptsächlich noch mit Magento und TYPO3 unterwegs. Seine Leidenschaft ist und bleibt aber (S)CSS in der Verbindung mit Contao, die er in seiner Freizeit versucht auszuleben. Man kennt ihn in der Contao Szene für die Beteiligung und Koordination von Projekten wie MetaModels, syncCto oder der Contao Community Alliance. Mehr Infos

Nicky Hoff

Nicky Hoff

E&F: Arbeitest du mit dem contaoeigenen oder einem externen Editor?

Nicky: Als ich mit Contao irgendwann mal angefangen habe, fiel mir natürlich der interne CSS-Editor in die Augen, aber nach ein paar Tests habe ich diesen umgehend links liegen lassen, da es einfach zu langsam ging und nicht in meinen Workflow gepasst hat.

E&F: Was hat deine Entscheidung beeinflusst?

Nicky: Mit einem externen Editor ist man einfach schneller. Nachdem ich viele Jahre einfach nur „reines“ CSS geschrieben habe und einzig HTML5 Boilerplate als Grundlage genutzt habe, so hat sich das mit dem Erfolg von Responsive Design in den letzten Monaten/Jahren schnell verändert.

E&F: Welchen Präprozessor nutzt du und warum?

Nicky: Nach anfänglichen Berührungsängsten konnte ich schnell die Vorteile von SASS und Compass lieben lernen. Gerade die Schreibweise gefiel mir sofort und ging sehr schnell von der Hand. Nachdem ich mich auch mit der Version 3 von Bootstrap sehr schnell anfreunden konnte (v2 war einfach nur schrecklich), hatte ich also meine „neuen“ Grundlagen zusammen. Ich nutze Bootstrap jedoch nicht komplett, sondern nur die Grundlagen (normalize, type etc.) und das Gridsystem. Alle anderen Sachen nutze ich dann nur bei Bedarf.

Ich habe mich ein bisschen belesen und eigentlich nur zwischen LESS und SASS entschieden. Irgendwie habe ich mich dann vom Gefühl her für SASS entschieden.

E&F: Wie werden deine SASS-Dateien weiterverarbeitet?

Nicky: Ich war lange auf der Suche nach einem geeigneten System, wie ich am besten mit SASS und Compass arbeiten kann. Erst habe ich versucht, die SASS-Dateien über Theme+ und Ruby direkt über den Server kompilieren zu lassen. Das hat aber nicht so richtig geklappt. Einerseits war es recht zeitaufwändig alle Dateien in Theme+ einzubinden und dann gab es auch immer wieder Probleme mit der Kompilierung über Ruby in Theme+, weshalb ich das schnell wieder sein gelassen habe.

Die Kompilierung über PHP ging mir zu langsam und es fehlten einzelne Funktionen, die aber bei Bootstrap grundsätzlich drin waren. Damit es schneller geht, kam also erstmal nur eine lokale Kompilierung in Frage.

„Sublime Text in Verbindung mit LiveReload auf dem Mac war da mein erster Versuch.“

LiveReload war super gerade in Verbindung mit den Browser-Erweiterungen absolut genial. Nur mit Sublime konnte ich mich einfach nicht anfreunden. Als dann auch noch die Entwicklung von Sublime Text 3 stagnierte (und es immer noch keine stabile Version gibt) kam mir phpStorm 8 gerade recht.

Anfangs phpStorm und LiveReload, aber seit Version 8.0.2 kann man den phpStorm-eigenen FileWatcher sehr gut benutzen. Die Einrichtung geht pro Projekt sehr schnell von der Hand und einmal eingerichtet flutscht das alles sehr gut.

E&F: Was schätzt du an SASS, welche Funktionen nutzt du?

Nicky: Am meisten nutze ich natürlich die verschachtelte Schreibweise und die Grundfunktionen von SASS/Compass. Ich nutze gern und extensiv z.B. Variablen, Berechnungen, @import, @media, @extend. Natürlich nutze ich auch mixins, aber da tue mich aktuell noch schwer, selbst welche zu kreieren.

Da mixins aber ganz schnell auch viel Code produzieren können, muss man damit ja sowieso verdammt aufpassen. Mittlerweile nutze ich einen Autoprefixer, um auf die Vendor-Prefix-Mixins zu verzichten.

E&F: Bist du mit deinem Workflow zufrieden?

Nicky: Zum aktuellen Zeitpunkt bin ich auch so mit meinem Workflow zufrieden, wobei man gerade in der Kommunikation mit anderen immer wieder was neues kennen lernt und ausprobiert. Schauen wir mal, was als nächstes kommt.

Über Nicky:

Nicky Hoff ist ein apfel-liebender Mediengestalter, der als selbstständiger Frontendentwickler die Interessen seiner Kunden und das Können von Designern, Entwicklern und anderen Webspezialisten vereint, um als Resultat eine auf die Kundenwünsche zugeschnittene Webanwendung zu präsentieren. Seit 2008 steht dabei Contao im Mittelpunkt, um eigene Kunden zu betreuen, aber auch andere Agenturen als Whitelabel zu unterstützen. Mehr Infos

Sascha Mueller

Sascha Müller

E&F: Arbeitest du mit dem contaoeigenen oder einem externen Editor?

Sascha: Ich arbeite mittlerweile ausschließlich mit PhpStorm. Der in Contao integrierte Editor erfordert für meine Arbeitsweise zu viel „geklicke und gescrolle“.

Eine einzige Zeile CSS wird durch die Felder und Beschreibungen einfach zu sehr aufgebläht und macht den Code insgesamt zu unübersichtlich und schwerer überschaubar.

E&F: Was hat deine Entscheidung beeinflusst?

Sascha: Bereits vor meinem Kontakt zu Contao habe ich mit NetBeans und vor allem Eclipse gearbeitet. Damit hatte der integrierte CSS-Editor nie eine wirkliche Chance. Lediglich für ein paar Kundenprojekte ist der interne Editor zum Einsatz gekommen um es den Kunden zu ermöglichen vorher festgelegte Werte selbst ändern zu können.

E&F: Welchen Präprozessor nutzt du und warum?

Sascha: Ich nutze SASS mit der SCSS Syntax.

Ausschlaggebend war damals für mich die Zeitersparnis durch die Verwendung von einfachen Hilfsmitteln wie Variablen und mixins mit denen ich mir nicht mehr merken musste welcher Browser welche CSS-Eigenschaft unterstützt.

E&F: Wie werden deine SASS-Dateien weiterverarbeitet?

Sascha: Derzeit werden meine SCSS-Files von "Autoprefixer" um die nötigen Prefixe ergänzt, von SCSS-Lint kontrolliert und dann als komprimierte CSS-Datei via SFTP hochgeladen. In Contao wird nur noch das fertig komprimierte CSS-File eingebunden.

E&F: Was schätzt du an SASS, welche Funktionen nutzt du?

Sascha: Ich schätze die starke Arbeitserleichterung durch die Verwendung eines Präprozessors. Er ermöglicht es mir mein SCSS nun auf mehrere Dateien zu verteilen und stark zu modularisieren. Endlich kann ich Variablen zentral verwalten und leicht ändern, mit mixins automatisch einen px-Fallback für rem-Werte setzen lassen und hinterher alles komprimiert ausgeben, ohne mich weiter darum kümmern zu müssen.

E&F: Bist du mit deinem Workflow zufrieden?

Sascha: Jein. Ich habe noch ein paar Stellschrauben an denen ich drehen möchte und prüfe gerade in wie weit ich meinen Workflow mit Grunt/Gulp verbessern kann.

E&F: Welche Änderungen/Funktionen würdest du Dir für die Zukunft wünschen?

Sascha: Da gibt es für mich derzeit viele Baustellen.

„Ich plane den Umstieg von "RubySASS " auf "libsass" und suche noch das richtige Grid-Framework für meine Bedürfnisse.“

Für Contao würde ich mir wünschen, dass die Möglichkeiten zum Tausch der internen CSS-Klassen und Ids weiter verbessert wird. Marc Reimann und ich hatten begonnen für diesen Zweck ein Config-File zu erstellen und Yanick Witschi hat diese Idee in seiner Erweiterung Contao CSS Class Replacer aufgegriffen.

Über Sascha:

Sascha Müller ist seit 2007 selbstständiger Frontend Entwickler und hat sich 2010 auf die Erstellung von Themes für Contao spezialisiert. Mehr Infos

Vielen Dank, dass ihr euch die Zeit genommen habt, unsere Fragen zu beantworten!

Kommentare

Kommentar von Stephan Schneider |

Wann gibts denn den näcshten Teil?
Freue mich schon darauf

Antwort von Dennis Erdmann

Moin Stephan,

am 23.03. werden wir voraussichtlich den nächsten Teil veröffentlichen. Du kannst auch unseren RSS-Feed abonnieren, um keinen Teil mehr zu verpassen.

Bitte rechnen Sie 4 plus 5.