Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 27. Общие рекомендации при вёрстке сайтов

Содержание курса

Общие рекомендации при вёрстке сайтов. Методика Яндекс.БЭМ

Давайте рассмотрим некоторые рекомендации при вёрстке сайта:

1. Избегайте использования селектора наследования
2. Избегайте использования ID
3. Избегайте использования селекторов вида div.header, span.logo
4. Избегайте использования !important

Использование выше описанного может доставить вам в будущем кучу проблем при каких-то исправлениях и доработках сайта.

Страницы сайта состоят из блоков, которые в свою очередь сложены из логически объединённых элементов:

Для того, чтобы вам при вёрстке были понятны селекторы CSS рекомендуется давать блокам и элементам логически понятные названия, например header, content, left-menu, в противном случае вы имеете все шансы запутаться в собственной писанине, не говоря уже о том, когда вы работаете в команде. Рассмотрим пример, где всем элементам будут даны логические названия:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Document</title>
			<style>
			
				/* CSS -сброс */
				* {
					margin: 0;
					padding: 0;
					outline: 0;
					border: 0;
					font-size: 0;
					}
					
				/* Блок */
				.figures {
					margin: 20px 0 0 20px;
					width: 600px;
					min-height: 120px;
					border: 2px solid green;
					}
				
				/* Элемент записан через два нижних подчёркивания */
				.figures__circle {
					width: 100px;
					height: 100px;
					margin: 5px;
					border: 4px solid yellow;
					border-radius: 50%;
					display: inline-block;
					}
					
				/* Модификатор элемента записан через одно нижнее
				подчёркиввание для удобства понимания*/
				.figures__circle_blue {
					background: blue;
					}
			
			</style>
		</head>
		<body>
		
			<div class="figures">
				<div class="figures__circle"></div>
				<div class="figures__circle"></div>
				<div class="figures__circle"></div>
				<div class="figures__circle figures__circle_blue"></div>
				<div class="figures__circle"></div>
			</div>
		
		</body>
	</html>

Вид в браузере:

Описанный выше подход к вёрстке сайтов называется Яндекс.БЭМ (Блок, Элемент, Модификатор) - в его основе лежит принцип разделения интерфейса на независимые блоки. Для более лучшего усвоения этого материала советую вам взять один из шаблонов сайта (например, сайт википедии) и сверстать его по методике Яндекс.БЭМ. При этом задавайте классы элементам по схеме блок, блок__элемент, блок__элемент_модификатор, задавая при этом логически понятные названия. Если вы будете постоянно практиковаться в вёрстке сайтов, то со временем поймёте, что такая схема значительно упрощает понимание вашего собственного кода.

Итак, общая схема БЭМ такова:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Яндекс.БЭМ</title>
			<style>
			
				block {...}
				block__element {...}
				block__element_modifier {...}
			
			</style>
		</head>
		<body>
		
			<div class="block">
				<div class="block__element">Содержимое</div>
				<div class="block__element">Содержимое</div>
				<div class="block__element">Содержимое</div>
				<div class="block__element_modifier">Содержимое</div>
				<div class="block__element">Содержимое</div>
			</div>
		
		</body>
	</html>

Рассмотрите правильный и неправильный примеры задания классов блокам, элементам и модификаторам по методике Яндекс.БЭМ:

	Правильно:
	
		<ul class="menu"> /*Блок*/
			<li class="menu__element"> /*Элемент*/
				<a class="menu__link">Ссылка</a> /*Элемент*/
			</li>
			/*Модификатор*/
			<li class="menu__element menu__element_active menu__element_red">
				<a class="menu__link">Ссылка</a> /*Элемент*/
			</li>
		</ul>
		
	Неправильно:
	
		<ul class="menu"> /*Блок*/
			<li class="menu__element"> /*Элемент*/
				<a class="menu__element__link">Ссылка</a> /*Элемент*/
			</li>
			<li class="menu__element_red"> /*Модификатор*/
				<a class="menu__element__link">Ссылка</a> /*Элемент*/
			</li>
		</ul>

Также не забывайте о том, что использование комментариев и правильное форматирование поможет вам лучше ориентироваться в коде. Если вы плохо ориентируетесь в английских названиях, пишите транслитом например, zagolovok, shapka-saita, podval-saita, logotip.

Итак, подводя итоги этого урока можно сказать:

1. Избегайте использования селектора наследования
2. Избегайте использования ID
3. Избегайте использования селекторов вида div.header, span.logo
4. Избегайте использования !important
5. Задавайте логически понятные названия классам
6. Используйте методику Яндекс.БЭМ (Блок, Элемент, Модификатор)
7. Используйте комментарии в коде для пояснения
8. Используйте удобное для восприятия форматирование кода
9. Используйте CSS сброс перед написанием кода стилей (см. пример выше)

Обязательно поупражняйтесь в написании правильной, логически понятной структуре кода по методике Яндекс.БЭМ!

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля