Merge pull request #15 from zweitag/add-proposal-for-modifiers

Vorschlag für ein anderes Modifier-Konzept

Author: Johannes Kimmeyer

README.md

@@ -94,12 +94,15 @@ Varianten und Status einer Komponente werden mit Modifier abgebildet. Sie treten
 
 #### Beispiele
 
-`.button.primary`, `.text-link.unobtrusive`, `.product-list--entry.sold-out`, `.button.primary.disabled`
+* `.button.is-primary`, `.text-link.is-unobtrusive`, `.product-list--entry.is-sold-out`, `.button.primary.is-disabled`,
+* `.navigation.has-submenu`, `.button.has-addon`
 
 #### Eigenschaften des Namens
 
 * beschreibt einen Zustand oder besonderes Verhalten einer Komponenteninstanz, wodurch eine Variante entsteht
-* ist idealerweise ein einfaches Adjektiv
+* wenn sich der Modifier auf den Zustand oder das Verhalten einer Komponenteninstanz bezieht, benutzt man das `is`-Prefix und ein einfaches Adjektiv
+* falls eine Komponenteninstanz sich auf einen Bestandteil der Komponenteninstanz bezieht, benutzt man das `has`-Prefix und ein einfaches Nomen
+* die Prefixe werden benötigt, damit ein Modifier einfach identifiziert werden kann und Zustände abgebildet werden können, für die Adjektive nicht ausreichend sind
 * steht nie alleine, sondern ist nur in Verbindung mit der Komponente eindeutig ([Warum?](https://github.com/zweitag/html-css-guidelines/pull/2#discussion_r123475470))
 
 ### Block, Element, Modifier (BEM)
@@ -130,7 +133,7 @@ Die Syntax von BEM finden wir jedoch etwas sperrig und haben uns für ein andere
       <pre lang="haml">
       %ul.fact-list
         %li.fact-list--entry
-        %li.fact-list--entry.highlighted
+        %li.fact-list--entry.is-highlighted
       </pre>
     </td>
   </tr>
@@ -151,7 +154,7 @@ Die Syntax von BEM finden wir jedoch etwas sperrig und haben uns für ein andere
         list-style-type: disc
       .fact-list--entry
         line-height: 1.2
-        &.highlighted
+        &.is-highlighted
           font-weight: 700
       </pre>
     </td>

sass-style-guide.md

@@ -78,13 +78,13 @@ Verschachtelungen innerhalb eines Elements beginnen mit Pseudoklassen, gefolgt v
     border-color: $color-border-loud
   &::before
     content: '*'
-  &.highlighted
+  &.is-highlighted
     background-color: $color-background-loud
 
 .main-navigation--link
   display: block
   padding: 5px 0
-  .main-navigation--item.highlighted &
+  .main-navigation--item.is-highlighted &
     color: $color-text-inverted
 ```