Merge branch 'master' into 488-responzivní-design-1-aktualizace

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 jednotlivé části/oddíly, 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 k 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.
 
 ```
 .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,8 +44,7 @@ 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, které tvoří nějaký blok. Elementy nikdy nestojí samy o sobě, **vždy jsou součástí nějakého bloku.** Podobně jako u bloku, název elementu popisuje jeho význam a smysl na stránce, nikoliv jak vypadá. V CSS se zapisují jako názvu pomocí **dvojitého podtržítka.**
 
 ```
 .card__icon
@@ -55,20 +54,20 @@ Elementy se zapisují do tříd po názvu bloku s **dvojitým podtržítkem**.
 .card__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. V CSS nepotřebujeme znázornit vztah rodičů a potomků. Stylujeme pomocí tříd a ne podle HTML elementů a jejich pozice vůči rodiči. Při vytváření tříd se tedy naopak snažíme, aby byla struktura CSS co nejplošší.
 
 ```
 .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 umožňuje měnit styl 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 úplně novou CSS gřídu, stačí přidat změnu k nějakému bloku nebo elementu. Modifikátory se píšou **na konec názvu bloku nebo elementu, za dvojitou pomlčku.**
 
 ```
 .navitem--active
@@ -79,7 +78,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 +89,15 @@ 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.
+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í.
 
-::codepen{user=marketaanezka id=rNYRZbB tab=html,result}
-<br/>
+::fig[BEM Block]{src=assets/BEM-example.png}
 
 #### 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