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

Question

[andreyka_g]

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

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 {...}

Answer 1

[Юрий Лобанов]

Раз и навсегда хочу для себя выяснить, использовать мне ложку или вилку за столом. А может нож?

Comments

[andreyka_g]

мне предельно нравится Ваш ответ!)

[Юрий Лобанов]

@andreyka_g Вы, надеюсь, поняли, на что я намекаю? )

[andreyka_g]

@iiil все зависит от ситуации?

[Юрий Лобанов]

@andreyka_g ага

[Юрий Лобанов]

@andreyka_g а еще иногда надо пользоваться и тем, и тем, и тем.

[Алексей Кулешов]

@iiil это тем у кого 3 руки?))

Answer 2

[Boxxy]

Если класс предполагает множественное использование, то делайте .header, если нет - #wrapper .container .header
Аналогично и с .name, h1.name

input[type="submit"] лучше не использовать. Если вы вдруг захотите сделать из < input type="submit" >
< button type="submit" >, то вам придется переписывать CSS.

Answer 3

[Вячеслав Слинько]

Я использую БЭМ-подобное именование, и 98% моих селекторов вида .class {}

Answer 4

[Александр]

Используйте опыт поколений - пишите по БЭМ методу. Отдельные классы для всего - и будет вам щасте

Answer 5

[Алексей Кулешов]

Взял за привычку не описывать отдельно стиль, только в паре с 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>
...

Answer 6

[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. И стили твои все пропадут. Поэтому делай выводы из этого.

Answer 7

[Павел Мышкин]

По опыту - только классы. Уникальные классы для всего. Как тут писали выше, методология БЭМ - идеальное решение, но не обязательно использовать её, просто понять методику и следовать ей везде.

Answer 8

[Талга УтБ]

Используйте принцип АНБ - абсолютно независимые блоки и не будете париться ;)

Answer 9

[Илья Лесных]

У селекторов разного вида разная приоритетность (специфичность). Соответственно, как их составлять - нужно выбирать от задачи.

habrahabr.ru/post/137588

Answer 10

[Илья Сидоренко]

<h1 class="h1"></h1>

.h1 {
/**/
}