css
Es gibt 25 Beiträge mit dem Schlagwort css.
CSS Dig – Chrome Extension zur CSS-Analyse
Sicherlich erinnert ihr euch noch, als ich euch CSS Stats vorgestellt habe. Grundsätzlich ein gutes Tool, um seine CSS-Anweisungen zu untersuchen und ein CSS-Refactoring durchzuführen. Allerdings hatte CSS Stats zwei Nachteile: es ließ sich nur über Umwege für lokale Projekte nutzen und es hat die CSS-Datei oft gecached, so dass ich nicht mal eben meine Verbesserungen im Tool betrachten konnte.
Vor ein paar Tagen bin ich dann auf die Chrome Extension CSS Dig gestoßen und was soll ich sagen?! Auf den ersten Blick macht sie genau das, was ich bei CSS Stats vermisst habe. Empfehlenswert für jeden, der Chrome als primären Browser zur Webentwicklung nutzt.
BEM – Block, Element, Modifier
Im Dev-Blog von ZEIT ONLINE beschreibt Nico Brünjes (Teamleiter Frontend), wie er und sein Frontend-Team es mithilfe von BEM (von Yandex entwickelte Namenskonvention) geschafft haben, eine so umfangreiche Seite wie ZEIT ONLINE schlank und erweiterbar zu machen.
CSS-Refactoring
Kennt ihr das Gefühl, wenn ihr ein Buch gelesen habt und es euch in den Fingern kribbelt, das Gelernte direkt auszuprobieren und umzusetzen? Mir ging es so bei dem Buch Responsible Responsive Design.
Direkt am nächsten Tag schaute ich mir den Quelltext von Erdmann & Freunde an, der ja nun auch schon ein 3/4 Jahr alt war. Damals hatte ich mich für LESS entschieden, im Laufe des Jahres aber neue Projekte immer häufiger Projekte mit SCSS umgesetzt, so dass ich gerne mal Mixin-Aufrufe und Variablen falsch schrieb, wenn ich mal wieder in einem LESS-Projekt arbeitete. Ich entschloss mich, Erdmann & Freunde auf SCSS umzubauen und erhoffte mir dadurch auch, ein paar KB Anweisungen in meiner master.css Datei zu sparen. Nichtmal für „ein Paar“ hat es gereicht. Lediglich 1 KB sparte ich durch den Wechsel von LESS auf SCSS ein.
CSS Stats
Erstellt, wie der Name schon sagt, Statistiken über die Stylesheets einer Website. Nützliches Tool, um die verwendeten Anweisungen auf Herz und Nieren zu prüfen, z.B. die Anzahl der verwendeten Farben, Verschachteln von Anweisungen (CSS-Specifity) uvm. Ich nutze es zurzeit, um für E&F ein CSS-Refactoring durchzuführen.
When to use @extend; when to use a mixin
Eigentlich empfiehlt Harry Roberts @extend gar nicht zu nutzen:
„Let me start by saying that I would generally advise never to use @extend at all.“
Die falsche Verwendung führt schnell dazu, dass sich CSS-Dateien unnötig aufblasen und ein vielfaches ihrer eigentlichen Größe erreichen. Wer aber dennoch nicht auf die durchaus praktische Funktion verzichten will, für den hat Harry 3 Tipps.
CSS Guidelines von Harry Roberts
Ich weiß nicht wie es euch geht, aber ich bin immer wieder neugierig, wie andere Entwickler arbeiten. Ihre Herangehensweise an neue Projekte, welche Programme sie nutzen, sogar wie sie ihren Code bzw. CSS schreiben.
Umso erfreuter war ich, als ich vor ein paar Tagen dank Twitter auf das Projekt CSS Guidelines hingewiesen wurde. Zu Anfang noch sehr übersichtlich, entwickelt Harry Roberts den Guide Woche für Woche kontinuierlich weiter. Da das Projekt über freiwillige Spenden finanziert wird und ich für solche Infos sonst Bücher im Wert von 10-20 Dollar kaufen würde, ist es mir nicht besonders schwer gefallen, das Projekt zu unterstützen. Und das solltet ihr auch tun. Zumindest, wenn ihr noch weitere Tipps für das effizientere Schreiben und Anwenden von CSS erfahren wollt.
Fullscreen Overlay Styles & Effects
Mal wieder ein paar gut animierte CSS3 „Overlay-Effekte“ bei Tympanus, die sich beispielsweise für Menüs (wie bei meinem Blog) nutzen lassen.
Animate.css
Dan Eden hat eine nützliche Sammlung von CSS3 Animationen zusammengestellt, die unter anderem auch auf Seiten wie Eletronic Arts oder Disney zum Einsatz kommen.
Für eine bessere Zusammenarbeit zwischen Designern und Entwicklern
Vor wenigen Tagen hielt Harry Roberts im Rahmen der CSSonf.eu in Berlin einen überaus interessanten Vortrag über die Normalisierung von Designs. In dem knapp 45 minütigen Video beschreibt er die Zusammenarbeit zwischen Designern und Entwicklern (und seine Rolle als Vermittler) beim PayTV-Sender Sky. Einerseits durch den Verzicht von pixelperfekten Photoshop-Layouts und die Normalisierung von CSS in der Umsetzung, andererseits durch das gegenseitige voneinander Lernen konnten sowohl Design- als auch Code-Qualität stark verbessert werden .
Tatsächlich erwische ich mich selbst immer häufiger dabei, dass ich Entwürfe nur noch grob gestalte und dem umsetzenden Entwickler mitteile, er solle die Abstände, Breiten und Höhen gemäß des angedachten Rasters verwenden. Wie sagte Harry so schön?!
„Photoshop ist ein Anhaltspunkt, kein Vertrag. Nur weil das Design so aussehen könnte, muss es das nicht zwangsläufig.“
Die dazugehörigen Slides findet ihr übrigens bei Speakerdeck.