icon-arrow-lefticon-arrow

Was ist BEMIT CSS?

Erklärung BEMIT CSS ist die Kombination aus der Benennungskonvention BEM und dem Organisationssystem ITCSS. Kernziel von Benennungskonvention und Organisationssystem ist es, eine möglichst skalierbare und gut zu pflegende CSS-Architektur zu erstellen. BEM zeigt den Entwicklern, wie die CSS Klassen in Relation zueinander stehen. Dies ist besonders bei komplexen DOM-Strukturen nützlich und wird perfekt von ITCSS ergänzt. […]

Mehr erfahren

Was ist »CSS-in-JS«?

Erklärung »CSS-in-JS« ist ein Ansatz, um mit den komplexen Herausforderungen, wie Pflege, Scoping und Strukturierung von CSS umzugehen, wenn ein modularer Entwicklungsansatz verfolgt wird. Voraussetzung ist, dass die Module via JavaScript implementiert werden. Dabei wird das CSS für ein bestimmtes Modul nicht in einer separaten CSS Datei gepflegt, sondern direkt im JavaScript. Ein notwendiger Kompilierungsprozess […]

Mehr erfahren

Was ist ITCSS?

Erklärung  ITCSS steht für »Inverted Triangle CSS« und ist ein Organisationssystem, um eine möglichst skalierbare und gut zu pflegende CSS-Architektur zu erstellen. Das Schlüsselprinzip von ITCSS besteht darin, den CSS-Code in einzelnen Kategorien aufzugliedern. Diese werden als »Layer« bezeichnet. ITCSS ist mit CSS-Methodiken wie BEM, SMACSS or OOCSS kompatibel. Die CSS Layer werden von generischen […]

Mehr erfahren

Was bedeutet BEM (Block, Element, Modifier)?

BEM steht für »Block, Element, Modifier« (.block__element–modifier{}) und ist ein Konzept zur Benennung von CSS-Selektoren. Der Vorteil des Konzepts besteht darin, dass Entwickler anhand des Namens die Funktion eines CSS-Selektors erkennen können. Der .block stellt die erste und gröbste Abstraktionsebene dar An zweiter Stelle steht mit .block__element das Kind-Element des Blocks. Es hilft den .block zu gestalten […]

Mehr erfahren

Was bedeutet DRY CSS?

Erklärung DRY steht für »Don’t repeat yourself« und beschreibt ein Architekturkonzept für CSS-Code. Das Ziel von DRY CSS besteht darin, Wiederholungen im Code möglichst zu vermeiden und den Code somit pflegeleicht und schlank zu halten. Dazu basiert DRY auf folgenden drei Prinzipen. Wiederverwendbare CSS-Eigenschaften werden gruppiert Diese Gruppen werden logisch benannt Selektoren werden den Gruppen […]

Mehr erfahren

Was ist Atomic Design?

Erklärung Atomic Design ist ein Konzept zur Organisation von Web Layouts. Das Ziel von Atomic Design besteht u.a. darin, komplexe (responsive) Projekte konsistent zu gestalten und übersichtliche Sinneinheiten zu erzeugen. Das wiederum vereinfacht die Zusammenarbeit von mehreren Personen am gleichen Projekt. In diesem Zusammenhang spricht man auch von einem Design-System. Der Begriff Atomic Design wurde von […]

Mehr erfahren

Was bedeutet SMACSS?

Erklärung SMACSS (Gesprochen: »Smacks«) steht für »Scaleable and modern Architektur for CSS«. In erster Linie ist SMACSS eine Sammlung vom Hilfestellungen und Namenskonventionen zur Organisation von CSS-Projekten. Der CSS-Code wird dabei in folgende Bereiche untergliedert: Base Elementares Styling von HTML-Elementen. Layout Unterteilung der Website in grobe Sinnabschnitte wie Header, Footer, Content etc. Module Wiederverwertbare Bereiche […]

Mehr erfahren

Was bedeutet OOCSS?

Erklärung OOCSS steht für objektorientiertes CSS. Bei objektorientiertem CSS werden u.a. Struktur und Aussehen getrennt. Um eine Infobox zu gestalten würde man in OOCSS beispielsweise nicht die Farbe der Box in der gleichen Klasse definieren wie die Breite und die Höhe. Stattdessen erstellt man zwei CSS-Klassen und kombiniert sie. Somit kann die Gestaltung auch auf […]

Mehr erfahren

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet:

diegruenen