Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Das stimmt ja jetzt nur noch halb. Bitte definieren, wann is (Adjektiv) und wann has (Nomen)

* 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beispiele machen es klarer. Es gibt noch gar kein Beispiel für has.

* 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)
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions sass-style-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand Down