Какие селекторы css предпочтительнее использовать?

Хочу для себя раз и навсегда уяснить, как же все таки правильно писать.

1.Какой вариант использования css селекторов лучше писать, собственно, в css стили?
В первую очередь я напишу название тега или класса?
1.1h1 {...}
1.2 Может так?
h1.name {...}
Или эдак?
1.3.name {...}
2. Можно ли/нужно ли использовать поиск по атрибутамinput[type="submit"] {...}
3. Нужно ли писать полностью "адрес к элементу"?
3.1 Лучше так? - #wrapper .container .header {...}
3.2 Или так?
.header {...}
  • Вопрос задан
  • 3307 просмотров
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Раз и навсегда хочу для себя выяснить, использовать мне ложку или вилку за столом. А может нож?
Ответ написан
Пригласить эксперта
Ответы на вопрос 9
Boxxy
@Boxxy
Если класс предполагает множественное использование, то делайте .header, если нет - #wrapper .container .header
Аналогично и с .name, h1.name

input[type="submit"] лучше не использовать. Если вы вдруг захотите сделать из < input type="submit" >
< button type="submit" >, то вам придется переписывать CSS.
Ответ написан
Комментировать
Я использую БЭМ-подобное именование, и 98% моих селекторов вида .class {}
Ответ написан
Комментировать
Используйте опыт поколений - пишите по БЭМ методу. Отдельные классы для всего - и будет вам щасте
Ответ написан
Комментировать
Взял за привычку не описывать отдельно стиль, только в паре с id или тегом (исключение - вспомогательный класс clearfix), например:
.menu ul {
  list-style: none;}
header nav.menu {
  color: #333;
  font-size: 0.8em;}
footer nav.menu {
  color: #666;
  font-size: 0.72em;}

...
<header>
  <nav class="menu">
    <ul>
      <li></li>
    </ul>
  </nav>
</header>
...
<footer>
  <nav class="menu">
    <ul>
      <li></li>
    </ul>
  </nav>
</footer>
...
Ответ написан
Комментировать
@storaged
Вообще всё это, что ты написал в зависимости от ситуации применяется по-разному.
Можно применять и класс к элементу h1. Но мне кажется лучше изначально элементу h1 и остальным заголовочным элементам задать базовые стили, чтобы где бы ты его не вставил он смотрелся одинаково. Правильный тон верстки. Т.е. просто прописать в классах:
h1 { ... }.
Можно и для него использовать класс, но я бы использовал его для косметических изменений. Например:
h1.color-red.
Или если надо его видоизменить, или какие-либо свойства задать конкретному заголовку то прописать, непосредственно, связанную с ним каскадность (его родителей):
.container h1 { ... }, .nav h1 { ... }.
Так же можно использовать добавление класса, как я писал выше.
Поиск по аттрибутам использовать можно.
По-поводу каскадности в классе элемента - в зависимости от ситуации. Лучше использовать проще. Не более 2-3 классов. И лучше стараться вообще стараться элементы делать независимыми. Вот сделаешь ты, например, каскадный стиль элементу:
.nav .list .list-item .list-item-link
А потом изменишь название .nav, на .nav-wrapper, или .list-wrapper. И стили твои все пропадут. Поэтому делай выводы из этого.
Ответ написан
Комментировать
По опыту - только классы. Уникальные классы для всего. Как тут писали выше, методология БЭМ - идеальное решение, но не обязательно использовать её, просто понять методику и следовать ей везде.
Ответ написан
Комментировать
talgautb
@talgautb
front-end developer
Используйте принцип АНБ - абсолютно независимые блоки и не будете париться ;)
Ответ написан
Комментировать
У селекторов разного вида разная приоритетность (специфичность). Соответственно, как их составлять - нужно выбирать от задачи.

habrahabr.ru/post/137588
Ответ написан
Комментировать
iskros
@iskros
Руководитель проектов
<h1 class="h1"></h1>

.h1 {
/**/
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы