Add media query usage documentation

Author: rastersysteme

sass-style-guide.md

@@ -7,6 +7,7 @@
 - [Style-Definitionen](#style-definitionen)
 - [Syntax und Formatierung](#syntax-und-formatierung)
 - [Mixins vs. Extends](#mixins-vs-extends)
+- [Media Queries](#media-queries)
 - [Kommentare](#kommentare)
 - [Linting](#linting)
 - [EditorConfig](#editorconfig)
@@ -150,29 +151,108 @@ Um nicht ständig nach einer CSS-Eigenschaft suchen zu müssen, verwenden wir ei
 
 Wir arbeiten ausschließlich mit Mixins, [da Extends einige Nachteile mit sich bringen.](https://www.sitepoint.com/avoid-sass-extend/)
 
-## Kommentare
+## Media Queries
 
-Da man bei CSS nicht immer sofort sieht, warum eine Deklaration eingesetzt wird, macht es durchaus Sinn, Code zu kommentieren. Durch die Verwendung von Sass greifen wir dabei auf stille Kommentare zurück, die mit zwei Slashes `// …` eingeleitet werden. In der Regel sind Kommentare nur für die Entwickler wichtig und müssen dadurch nicht im CSS ausgegeben werden. Das reduziert zudem die Dateigröße.
+Um Inhalte optimal für verschiedene Devices und den damit verbundenen Viewports bereitzustellen, setzen wir Media Queries ein. Diese werden mit Hilfe des `respond-to` Mixins in jeder einzelnen Komponente in einem Block am Ende deklariert. Jede Viewport-Range ist dabei in sich geschlossen, d.h. es werden keine Styles aus den anderen Media Queries überschrieben:
 
-Möchte man eine einzelne Zeile in einem Block kommentieren, so setzt man den Kommentar ans Ende der Deklaration:
+```
+<--- large --- | --- medium --- | --- small --->
+```
+
+Alle Media Queries sind gleichwertig, es gibt kein *Desktop first* oder *Mobile first*. Existieren Styles, die übergreifend für alle Media Queries gleich sind, werden diese oben im Stylesheet festgehalten. Der Dateiaufbau sieht demnach wie folgt aus:
 
 ``` sass
+// Global Styles
 .box
-  position: absolute
-  top: -12px // Fallback if JS fails to load
+  …
+
+// Media Queries
++respond-to(large)
+  .box
+    …
+
++respond-to(medium)
+  .box
+    …
+
++respond-to(small)
+  .box
+    …
 ```
 
-Möchte man dagegen einen kompletten Block beschreiben, so setzt man den Kommentar direkt darüber:
+**Vorteile:**
+
+- **Effizienz** – Styling-Anpassungen sind schneller und gezielter zu bewerkstelligen. Tritt z.B. auf Smartphone XY ein Darsellungsfehler auf oder man möchte ein Element für die kleinste Viewport-Range optimieren, dann steuert man direkt den Block unter `+respond-to(small)` an und macht dort seine Änderungen.
+- **Leserlichkeit** – Dadurch, dass alle Media Query Definitionen en bloc am Ende stehen, sind sie nicht nur leichter aufzufinden, das Stylesheet bleibt obendrein auch leserlich. Würde man die Media Queries direkt ans Element schreiben, enstünde durch die ständige Einrückung im Code ein stockender Lesefluss.
+- **Wartbarkeit** – Bei dieser Vorgehensweise ist zudem mit weniger ungewollten Seiteneffekten zu rechnen. Es können keine Fehler in anderen Media Queries entstehen, da diese voneinander abgeschottet sind.
+
+**Nachteile:**
+
+- Es könnte der Eindruck enstehen, dass Code dupliziert bzw. wiederholt geschrieben und somit gegen das DRY-Prinzip verstoßen wird, weil anstatt von zwei Definitionen (global plus einmal überschreiben) nun immer drei (alle Media Queries) gesetzt werden müssen. Dem ist jedoch nicht so! Die Erfahrung zeigt, dass eine Änderung in nur einer Media Query eher die Seltenheit ist. In der Regel werden zwei oder gleich alle drei angepasst. Sollte dies dennoch mal passieren, sind die zuzätzlichen Bytes locker zu verkraften.
+
+### Vorgehensweise
+
+Schritt eins, man definiert seine `$breakpoints` in den entsprechenden [Settings](https://github.com/zweitag/rails-project-template/blob/master/app/assets/stylesheets/utilities/_responsify.css.sass). **Hinweis:** Auf mehr als drei Media Queries sollte man nicht zurückgreifen, da dies den Komplexitätsgrad und den damit verbundenen Zeitaufwand enorm in die Höhe treibt.
+
+Beginnt man nun damit die Komponente grundlegend zu stylen, wandern erst einmal alle Style-Definitionen in den globalen Bereich.
+
+``` sass
+// Global Styles
+.box
+  position: relative
+  margin-top: 20px
+  color: $accent-color
+```
+
+Möchte man eine neue Eigenschaft für eine bestimmte Viewport-Range hinzufügen, so setzt man diese in der entsprechenden Media Query.
 
 ``` sass
 // Global Styles
 .box
   position: relative
+  margin-top: 20px
+  color: $accent-color
+
+// Media Queries
++respond-to(large)
+  .box
+    border: 1px solid $border-color
+```
+
+Für den Fall, dass man eine bereits global gesetzte Eigenschaft für eine bestimmte Media Query ändern möchte, überschreibt man den globalen Style *nicht*, sondern entfernt ihn aus dem globalen Scope und setzt ihn gleichzeitig für alle Media Queries.
+
+**schlecht**
+
+``` sass
+// Global Styles
+.box
+  position: relative
+  margin-top: 20px
+  color: $accent-color
+
+// Media Queries
++respond-to(large)
+  .box
+    border: 1px solid $border-color
+
++respond-to(medium)
+  .box
+    margin-top: 10px
+```
+
+**gut**
+
+``` sass
+// Global Styles
+.box
+  position: relative
+  color: $accent-color
 
 // Media Queries
 +respond-to(large)
   .box
     margin-top: 20px
+    border: 1px solid $border-color
 
 +respond-to(medium)
   .box
@@ -183,6 +263,31 @@ Möchte man dagegen einen kompletten Block beschreiben, so setzt man den Komment
     margin-top: 5px
 ```
 
+## Kommentare
+
+Da man bei CSS nicht immer sofort sieht, warum eine Deklaration eingesetzt wird, macht es durchaus Sinn, Code zu kommentieren. Durch die Verwendung von Sass greifen wir dabei auf stille Kommentare zurück, die mit zwei Slashes `// …` eingeleitet werden. In der Regel sind Kommentare nur für die Entwickler wichtig und müssen dadurch nicht im CSS ausgegeben werden. Das reduziert zudem die Dateigröße.
+
+Möchte man eine einzelne Zeile in einem Block kommentieren, so setzt man den Kommentar ans Ende der Deklaration:
+
+``` sass
+.box
+  position: absolute
+  top: -12px // Fallback if JS fails to load
+```
+
+Möchte man dagegen einen kompletten Block beschreiben, so setzt man den Kommentar direkt darüber:
+
+``` sass
+// Global Styles
+.box
+  position: relative
+
+// Media Queries
++respond-to(large)
+  .box
+    margin-top: 20px
+```
+
 ## Linting
 
 Zum Testen unseres Sass-Codes benutzen wir [Sass Lint](https://github.com/sasstools/sass-lint). Die Dokumention der Regeln findet ihr [hier](https://github.com/sasstools/sass-lint/tree/master/docs/rules). Unsere Konfiguration findet man in unserem [Template-Repo](https://github.com/zweitag/rails-project-template/blob/master/.sass-lint.yml).