Abend 15: 07.09.2016 - Komplexe Sites modular strukturieren (Fallstudie)
Komplexe Sites modular strukturieren (Fallstudie)
Komplexe Sites modular strukturieren (Fallstudie)
-
- 1 / 18
-
Cartes-fiches
Was versteht man unter dem Shame.css?
Was ist ein BEM Mix?
Von einem BEM Mix spricht man, wenn einem einzelnen DOM-Node mehrere BEM Entities zugewiesen werden.
Beispiel:
<ul class="menu">
<!-- BEM Mix aus einem Element (menu__item) und einem Block (block-link) -->
<li class="menu__item block-link“></li>
<!---->
<li>...</li>
</ul>
Ein BEM Mix kann aus verschiedenen Arten von Entities bestehen, z.B. Block und Block, Block und Element, Element und Element.
Anwendungsmöglichkeiten:
"Mixes allow us to:
- Combine the behaviors and styles of several BEM entities while avoiding code duplication
- Create semantically new interface components on the basis of existing BEM entities."
https://en.bem.info/methodology/key-concepts/#mix
[X]Welche dieser BEM Naming Regeln sind falsch?
a) Zahlen, Buchstaben und Sonderzeichen sind erlaubt
b) Alles in Kleinschreibung
c) In englischer Sprache
d) Wort Trennung mit zwei Bindestrichen "--"
e) "Element" Trennung mit zwei Unterstrichen "__"
f) "Modifier" Trennung mit einem Unterstrich "_"
Antwort a und d
Atomic Design: Beispiel Navigation
Du entwirfst ein Template nach dem Atomic Design Ansatz. In der Navigation (3 Menupunkte) soll ein Suchfeld integriert sein.
Aus welchen Elementen besteht diese Navigation (1-stufig) und wie heissen diese Bausteine im Atomic Design?
Navigation - Organism
Menu - Molecule
Menu-Item 1 - Atom
Menu-Item 2 - Atom
Menu-Item 3 - Atom
Suchfeld - Molecule
Label - Atom
Eingabefeld - Atom
Suche-Button - Atom
[X]Komplexe Sites modular strukturieren
Welche der drei folgenenden class-Definitionen entsprechen dem Prinzip von BEM?
Auswahl:
Antwort 1
<form class="form_login">
<input class="form__input">
<input class="form__submit form__submit__disabled">
</form>
Antwort 2
<form class="form_login">
<input class="form__input">
<input class="form_submit form_submit_disabled">
</form>
Antwort 3
<form class="form_login">
<input class="form__input">
<input class="form__submit form__submit_disabled">
</form>
Antwort 4
<form class="form_login">
<input class="form--input">
<input class="form--submit form-submit-disabled">
</form>
Antwort 3
Weshalb sollte man keine ID Referenzen zum stylen von Elementen verwenden?
Weil man dann Probleme mit der Modularisierung des Codes bekommen kann, da ein valides HTML Dokument nur ein einziges Element mit der selben ID enthält. Somit könnte ein Modul nur ein Mal pro Seite eingesetzt werden.
Das selbe gilt wenn man ID's als Referenzen für JavaScript-Bindings verwendet.
Welche Frontend-Methodologie wurde hier angewendet?
<form class="form_login">
<input class="form__input">
<input class="form__submit form__submit_disabled">
</form>
Was besagt das Gesetz von Demeter? Gebe ein Beispiel
Das Gesetz von Demeter (englisch: Law of Demeter, kurz: LoD) ist eine Entwurfs-Richtlinie in der objektorientierten Softwareentwicklung. Sie besagt im Wesentlichen, dass Objekte nur mit Objekten in ihrer unmittelbaren Umgebung kommunizieren sollen. Dadurch soll die Kopplung (das heißt die Anzahl von Abhängigkeiten) in einem Softwaresystem verringert und somit die Wartbarkeit erhöht werden.
Beispiel: https://de.wikipedia.org/wiki/Gesetz_von_Demeter#Beispiel
Welches sind die zwei Grundsätze von OOCSS?
- Separieren von Struktur und Inhalt
- Separieren von Struktur und Stil
- Separieren von Container und Inhalt
- Separieren von Inhalt und Stil
Antwort: 2 und 3.
Beschreibung:
[X]Welcher Unix Grundsatz wurde in die CSS-Methode SMACCS übernommen ?
"Do One Thing and Do it Well." (DOTADIW)
Weiterführende Literatur:
http://www.catb.org/esr/writings/taoup/html/ch01s06.html
Nenne die Grundbausteine von Atomic Design.
- Atom
- Molekül
- Organismus
- Template
- Page
Wie könnte man die gleichzeitige Nutzung von Klassen für CSS und Javascript vermeiden?
Einführung von Js-* prefix für Javascript abhängige Klassen
Was ist BEM?
BEM (Block Element Modifier) ist eine weit verbreitete Methode/Naming Convention wie CSS aufgebaut werden kann.
Dabei werden Objekte je nach zugehörigkeit Eingeteilt.
Eine Gruppe von Elementen z.B. Listitems bzw. eine Liste wird dabei als Block betrachtet.
Der einzelne Baustein der Gruppe als Element z.B. ein Listitem.
Das selektierte Item als Modifier.
Dabei gibt es Class Naming Conventions beim CSS häufig verbreitet ist folgende:
".list {}" für Block
".list__item {}" für ein Listeneintrag
".list__item--selected {}" für den einzelnen selektierten Listeneintrag
[X]Welche Frontend-Methodologie ist die Beste?
Eine Kombination aus verschiedenen Methoden, z.B. OOCSSBEMITSCSS
Dies ist abhängig vom Projekt und dem Team.
Warum sollten in CSS grundsätzlich keine ID-Selektoren verwendet werden?
IDs
- sind unique, d.h. es wird nur 1 HTML-Element selektiert
- besitzen eine unnötig hohe Spezifitiät, was das Überschreiben dieser CSS-Rules erschwert (http://oli.jp/img/2011/important-inheritance.png)
[X]Welche Methodologien gibt es im Frontend Engineering?
- Atom Design
- BEM ( Block Element Modifier )
- SMACCS (Scalable and Modular Architecture for CSS)
- OOCSS
Outline - Strukturbereinigung
Gegeben:
<h1>This is my website</h1>
<section>
<h1>Main Content</h1>
<article>
<header>
<h1>My Title</h1>
</header>
<h1>My Content</h1>
<footer>
<h1>My Footer</h1>
<h2>My Sitemap</h2>
</footer>
</article>
</section>
Dies erzeugt folgende Outline Struktur:
1. This is my website
1. Main Content
1. My Title
2. My Content
3. My Footer
1. My Sitemap
2. Side Content
3. Sidebar
Wie kann erreicht werden, dass 'My Content' unter 'My Title' eingerückt ist?
Mittels:
- <section> um den Content
- <h1>My Content</h1> => <h2>My Content</h2>
Nenne je zwei Vor- und Nachteile für CSS-Styleguides
Pro
- Code wird einfacher zum testen
- Gemeinsame Arbeitsweise
- Einheitlicher Referenzpunkt
- Allgemeine Übersicht
- Gut zu verkaufen
Contra
- Zeitintensiv
- Fehlende Dokumentation
- Missinterpretationen
- Dient meist als “Hilfsprojekt”
- Teilweise abstrakt und outdated / unvollständig
- Wenige patterns etabliert
- Mangelnde Generatoren
