- PVSM.RU - https://www.pvsm.ru -
Я хотел написать комментарий к статье о том куда отправляются хорошие верстальщики [1], но мне стало лень. А потом опять стало не лень, но мыслей накопилось уже на целый пост.
Возьмем самый первый попавшийся пример из приведенной статьи. Там в макете, в самом верху, есть полоска на всю ширину окна:
И автор принимает решение сверстать эту полоску с помощью тега <hr>
, вот так:
<body class="whitesquare">
<hr/>
<!-- вся остальная страница -->
</body>
.whitesquare hr {
/* стили для полоски */
}
Это просто супер пример несоблюдения моего правила.
Чтобы применять правило, которое я попытаюсь сформулировать чуть позже, нужно научиться вербализировать селекторы. Что говорит селектор ".whitesquare hr"
? Если помнить что .whitesquare
это <body>
, то селектор говорит: «все <hr>
на сайте».
Посмотрим еще раз на CSS:
"все <hr> на сайте" {
/* стили для верхней полоски, и только для нее */
}
Это как-то странно. То ли автор не собирался больше использовать тег <hr>
, то ли собирался для новых <hr>
сбрасывать эти стили. Я не знаю, но думаю, что в любом случае селектор выбран неправильно.
Возьмем еще один пример, уже не из статьи. Меню.
<nav class="main-menu">
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</nav>
Нам нужно задать стили для ссылок. Какой выбрать селектор?
a
— все ссылки на сайте? Вряд ли ...li a
— все ссылки на сайте, которые внутри <li>
? Тоже нет..main-menu li a
— ссылка, которая внутри <li>
, который внутри .main-menu
? Не совсем. В нашем меню все ссылки внутри <li>
— это лишнее уточнение..main-menu a
— любая ссылка внутри .main-menu
? То что нужно.Пора сформулировать правило, но у меня получилось не правило, а небольшой алгоритм:
А теперь всё-таки правило:
Пишите в селекторе то, что вы действительно имеете в виду.
Кажется статья получалась так себе, и поможет только тем, кто уже почти всё понял. Она получилась как прицельный выстрел из снайперской винтовки. Чтож, надеюсь что либо это не так, и это статья — выстрел из базуки, либо она попадет хотя бы в одну цель %)
Автор: Pozadi
Источник [2]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/49448
Ссылки в тексте:
[1] статье о том куда отправляются хорошие верстальщики: http://habrahabr.ru/post/203838/
[2] Источник: http://habrahabr.ru/post/203942/
Нажмите здесь для печати.