Skip to content

Instantly share code, notes, and snippets.

@arnalyse
Last active August 29, 2015 14:14
Show Gist options
  • Save arnalyse/a7cad44d4b1d4ba05fc6 to your computer and use it in GitHub Desktop.
Save arnalyse/a7cad44d4b1d4ba05fc6 to your computer and use it in GitHub Desktop.
New Frontender - BEM Aufgabe

Block – Element - Modifier

Ausgangssituation

Die CSS-Struktur auf ZEIT ONLINE ist etwas in die Jahre gekommen. Sie ist über die letzten Jahre organisch gewachsen und wird aktuellen Frontend-Trends nicht mehr gerecht.

Im Team haben wir uns auf die zukünftige Nutzung von BEM geeinigt. Dabei kamen wir zu ähnlichen Einsichten wie andere Entwickler und haben unsere Erfahrungen mit BEM bereits geteilt.

Aufgabenstellung

Wählen Sie zwei Teaser-Formate von unserer Homepage aus und unterziehen Sie diese einem kleinen Frühjahrsputz.

Legen Sie eine einfache HTML-Seite an, in der Sie zwei Teaser mit aktuellem und semantisch sinnvollem HTML versehen.

Das CSS muss dabei zwingend nach den Vorgaben von BEM strukturiert sein. Die Verwendung und das konzeptionelle Verständnis von BEM steht bei dieser Aufgabe explizit im Vordergrund.

Aussehen und Funktionalität der Teaser sollen identisch zur bestehenden Website sein. Responsivität ist dabei ausdrücklich nicht gefordert, um den Rahmen dieser Aufgabe überschaubar zu halten.

Sie können gerne ein Boilerplate, einen CSS-Preprocessor oder sonstige Tools verwenden, wenn Sie mit diesen vertraut sind. Falls Sie einen Preprocessor nutzen, präsentieren Sie direkt Ihr Sass oder Less. Wir freuen uns aber gleichermaßen über schönes »vanilla CSS«.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment