Возьмем самый первый попавшийся пример из приведенной статьи. Там в макете, в самом верху, есть полоска на всю ширину окна:
И автор принимает решение сверстать эту полоску с помощью тега <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? То что нужно.
Пора сформулировать правило, но у меня получилось не правило, а небольшой алгоритм:
- Вербализируйте селектор. Ответьте на вопрос: какие элементы мне нужны? Каким элементам я хочу задать этот стиль? Ответ может быть: все ссылки на сайте; заголовок в блоке статьи; текстовое поле в форме с темой оформления ".dark-form"; эта уникальная кнопка, которая нигде не повторяется …
- Составьте минимально специфичный селектор выбирающий элементы которые вам нужны и только их.
А теперь всё-таки правило:
Пишите в селекторе то, что вы действительно имеете в виду.
Кажется статья получалась так себе, и поможет только тем, кто уже почти всё понял. Она получилась как прицельный выстрел из снайперской винтовки. Чтож, надеюсь что либо это не так, и это статья — выстрел из базуки, либо она попадет хотя бы в одну цель %)
ссылка на оригинал статьи http://habrahabr.ru/post/203942/
Добавить комментарий