BEM - dobrze rozumuje?

pytanie zadane 20 września 2016 w HTML i CSS przez zgrybus Pasjonat (24,860 p.)

Czy dobrze nadaje nazwy klasom ( według BEM )?

<!DOCTYPE HTML>
<html lang="pl">

<head>

	<meta charset="UTF-8">
	<title>Konspol</title>
	<link href="style.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lobster|Play" rel="stylesheet">
	
</head>

<body>
	
	<header class="headOfPage">
		
		<h1 class="title">
			
			<figure class="title__image">
			
				<img src="images/logo_icon.png" alt="Firma Konspol" class="title__img">
				
			</figure>
			
			Konspol - cukiernia Krakowska
			
		</h1>
		
	</header>
	
	<div class="wrapperOfNav">
	
		<nav class="navigation">
			
			<ul class="navigation__main">
			
				<li class="navigation__list"> 
					<a href="#" class="navigation__link"> O nas </a>
				</li><!--
				
				--><li class="navigation__list"> 
					<a href="#" class="navigation__link"> Nasze produkty </a>
				</li><!--
				
				--><li class="navigation__list"> 
					<a href="#" class="navigation__link"> Kontakt </a>
				</li><!--
				
				--><li class="navigation__list"> 
					<a href="#" class="navigation__link"> Facebook </a>
				</li><!--
				
				--><li class="navigation__list"> 
					<a href="#" class="navigation__link"> Youtube </a>
				</li>
			
			</ul>
			
		</nav>
	
	</div>
	
	<footer class="footOfPage">
		
		<section class="footOfPage__wrap">
			
			<p class="footOfPage__paragraph">
				Konspol - firma Cukiernicza CopyRight 2016
			</p>
			
		</section>
		
	</footer>
	
	
</body>

</html>

1 odpowiedź

odpowiedź 20 września 2016 przez niezalogowany
wybrane 20 września 2016 przez zgrybus

Najlepsza

I tak, i nie.

<ul class="navigation__main"> UL - Unordered List, powinno mieć raczej klasę navigation__list

<li class="navigation__list"> LI - List Item, podobnie jak wyżej: np. nazwa navigation__item

Mam wrażenie, że figure w header, czy .wrappery, są kompletnie niepotrzebne - jednak jeśli chodzi o sam BEM i dzielenie strony na bloki - mniej więcej o to chodzi. ( po prostu kod nie jest idealny )

komentarz 20 września 2016 przez zgrybus Pasjonat (24,860 p.)

ale z zasady - obrazki powinno się dołączać za pomocą figure. Chyba, że po prostu usunąć figure i w samym h1 dać obrazek?

komentarz 20 września 2016 przez niezalogowany

http://html5doctor.com/avoiding-common-html5-mistakes/#figure

komentarz 20 września 2016 przez zgrybus Pasjonat (24,860 p.)

wrappera potrzebowałem, aby wystylizować nawigacje :)

komentarz 20 września 2016 przez niezalogowany

obstawiam, że dałoby się bez niego : )

komentarz 20 września 2016 przez zgrybus Pasjonat (24,860 p.)

Dałoby się, ale to kilka linijek w css więcej. Chyba ten wrapper nie niszczy aż tak mojej kariery? ^_^

komentarz 20 września 2016 przez niezalogowany

Im mniej węzłów tworzysz w DOMie, tym lepiej dla programistów, którzy pracują przy projekcie (czytelność kodu), i dla przeglądarki (mniej roboty przy: parsowaniu strony / korzystaniu z DOM API). Niekoniecznie wiąże się to też z dodatkową ilością linijek w CSSsie. Jeśli istnieje taka możliwość, zawsze warto pozbyć się wrappera.