BEM: Úprava textu lekce

html-a-css/bem-a-responzivni-design/bem.md

@@ -1,14 +1,14 @@
 ## BEM
 
-BEM je jedna z metodik pro pojmenovávání tříd při stylování stánek. BEM není technologie, preprocesor, ani knihovna na stylování. Je to spíš konvence a doporučení, jak je možné si organizovat CSS soubory, vytvářet znovupoužitelné komponenty a psát čitelné CSS.
+BEM aneb Block - Element - Modifier je jedna z metodik pro pojmenovávání tříd při stylování stránek. BEM není technologie, preprocesor, ani knihovna na stylování. Je to spíš konvence a doporučení, jak je možné si organizovat CSS soubory, vytvářet znovupoužitelné komponenty a psát čitelné CSS.
 
-Podívejte se na následující design a promyslete si, jak byste přistoupili ke stylování takové stránky.
+Pro představu k čemu se BEM hodí, se podívejte na následující design a promyslete si, jak byste přistoupili ke stylování takové stránky.
 
 ::fig[BEM Block]{src=assets/page.png}
 
-Všimněte si, že na stránce je mnoho sekcí, které se opakují, nebo mají velmi podobné stylování. Abychom zbytečně neopakovali stejný kód, je dobré si stránku rozvrhnout. Přesně k tomu se používá metodika BEM.
+Všimněte si, že na stránce je mnoho sekcí, které se opakují, nebo mají velmi podobné stylování. Abychom zbytečně neopakovali stejný kód, je dobré si stránku rozvrhnout na jednolitvé komponenty/bloky, které lze stylovat pomocí stejných tříd. S tím nám pomůže právě metodika BEM.
 
-Než se dostaneme k samotné metodice, připomeneme si, že při zápisu CSS tříd se používá tzv. **kebab case**. Pokud se název třídy skládá z více slov, píše se mezi nimi pomlčka.
+Než se metodice ale dostaneme, připomeňme si, že při zápisu CSS tříd se používá tzv. **kebab case**. Pokud se název třídy skládá z více slov, píše se mezi nimi pomlčka. (Další druhy zápisu jsou snake case, camel case a pascal case).
 
 ```
 .page-title ✅
@@ -18,13 +18,13 @@ Než se dostaneme k samotné metodice, připomeneme si, že při zápisu CSS tř
 
 ### Block Element Modifier
 
-Písmena v názvu BEM znamenají:
+Jak už bylo zmíněno, písmena v názvu BEM znamenají:
 
 - B = block
 - E = element
 - M = modifier
 
-zápis CSS tříd podle konvence BEM je
+Zápis CSS tříd podle konvence BEM je následovný:
 
 `[block]__[element]--[modifier]`
 
@@ -44,31 +44,32 @@ Prohlédněte si obrázek a vyznačené oblasti. Všimněte si, které prvky se
 
 #### Element
 
-Elementy jsou jednotky, ze kterých je blok tvořen. Elementy samy o sobě nemají význam, jsou spojené s blokem. Elementy se nezanořují, není to kopírování HTML struktury.
-Elementy se zapisují do tříd po názvu bloku s **dvojitým podtržítkem**.
+Elementy jsou jednotky, ze kterých je blok tvořen. Elementy samy o sobě nemají význam, **vždy jsou spojené s blokem**. Jako u bloků jejich název popisuje, co je daný element, ne jak vypadá, nebo jaký má stav. Zapisují se do tříd po názvu bloku s **dvojitým podtržítkem**.
 
 ```
 .card__icon
 .card__more
 .card__title
 .card__amount
 .card__difference
+.card__footer__amount ❌
+.card__footer__difference ❌
 ```
 
-Na obrázku jsou vyznačené možné elementy v daném bloku.
-
-::fig[BEM Block]{src=assets/element.png}
-
-Pamatujme si, že elementy nezanořujeme!
+Elementy se nezanořují, není to kopírování HTML struktury.
 
 ```
 .card__footer__amount ❌
 .card__footer__difference ❌
 ```
 
+Na obrázku jsou vyznačené možné elementy v daném bloku.
+
+::fig[BEM Block]{src=assets/element.png}
+
 #### Modifier
 
-Modifier neboli modifikátor dává možnosti variace stylu daného bloku (nebo elementu). Je možné mít bloky a elementy, které se liší pouze velikostí nebo barvou. Pro takový případ není potřeba psát celý nový styl, stačí pouze přidat změnu do nové třídy. Modifikátory se píšou na konec názvu třídy, za dvojitou pomlčku.
+Modifier neboli modifikátor dává možnosti variace stylu daného bloku nebo elementu. Na rozdíl od bloku a elementu popisuje vzhled nebo stav. Když se jednotlivé bloky a elementy liší pouze velikostí, barvou atp., není potřeba psát celý nový styl, stačí pouze přidat změnu do nové třídy. Modifikátory se píšou **na konec názvu třídy, za dvojitou pomlčku.** 
 
 ```
 .navitem--active
@@ -79,7 +80,7 @@ Modifier neboli modifikátor dává možnosti variace stylu daného bloku (nebo
 
 ::fig[BEM Block]{src=assets/modifier.png}
 
-Třída `stock__difference` určuje styly, které jsou společné pro tento element - font, velikost fontu, paddingy, velikost šipky.
+Třída `stock__difference` tady určuje styly, které jsou společné pro tento element - font, velikost fontu, paddingy, velikost šipky.
 Ve třídě `stock__difference--up` bude pouze styl, který nějak upravuje výchozí styl elementu – v tomto případě by to byla pouze červená nebo zelená barva.
 
 Proto pokud je element modifikovaný, je potřeba do HTML přidat všechny stylovací třídy (tj. nejen ty s modifikátorem, ale i základní třídu bez modifikátoru).
@@ -90,16 +91,13 @@ Proto pokud je element modifikovaný, je potřeba do HTML přidat všechny stylo
 
 ### Příklad
 
-Tady je jeden z možných příkladů využití metodiky BEM při stylování. Pokud máme takto nachystanou jednu kartičku s profilem kavárny, přidání dalších se stejnými třídami nám je okamžitě nastyluje stejným způsobem.
-
-::codepen{user=marketaanezka id=rNYRZbB tab=html,result}
-<br/>
+Na obrázku vidíte jeden z možných příkladů, jak využít metodiky BEM při stylování. Pokud máme takto nachystanou jednu kartičku s produktem, můžeme ji opakovat několikrát s jinými produkty. Díky stejným třídám budou mít všechny karty stejné stylování. 
 
 #### Výhody použití BEM
 
 - můžeme recyklovat CSS na více komponentách
 - rychle se zoritentujeme, jak na sobě prvky závisí
-- píšeme „ploché“ CSS, tj. nevyužíváme selektroů potomků, takže nevznikají CSS konflikty ve specificitě
+- píšeme „ploché“ CSS a nevznikají CSS konflikty ve specificitě
 
 #### Nevýhody použití BEM