CSS « Как правильно прописывать путь к классу в CSS?

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<div id="section">
  <div class="header-h1"></div>
  <ul id="menu" >
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>
 

Вариант №1
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }

    #section .header-h1 {...}
    #section #menu .item {...}
 

Вариант №2

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }

    .header-h1 {...}
    .item {...}
 

Какой вариант правильный и лучше? И в каком варианте страница будет быстрей загружаться?
0
css верстка

1 ответов

Но тогда уж лучше что-то типа:


.header-h1 {...}
.header-item {...}
 , ведь просто .item ни о чем не говорит и может использоваться где-то еще и получится конфликт стилей.

Дальше.

Правильный и лучше — второй вариант. Он будет быстрее работать, т.к. нет каскада. Каскад — это когда пишешь что-то вроде .myclass div a img {...} — ступенечки получаются. CSS-движок парсит выражения справа налево — делает выборку всех img в DOM-дереве, потом всех a-элементов, потом отфильтровывает все a-элементы, в которых есть img-элементы, потом делает выборку всех div'ов, потом отфильтровывает те div'ы, в которых есть уже отфильтрованные a-элементы, потом делает выборку всех элементов с классом .myclass, потом отфильтровывает все .myclass-элементы, в которых есть уже отфильтрованные div-блоки ну и наконец задает ваши стили для оставшихся img-элементов.

В Яндексе, чтобы избежать каскада, задают имена классам по методу BEM — Блок__Элемент_Модификатор, с андерслешами для логического разделения, а не с дефисами. Для каждого элемента свой класс. Теги не используют (ну, почти). Например:

.products {...} // для div-блока
.products__list {...} // для ul-списка, который внутри div-блока
.products__list_half {...} // для ul-списка шириной в 50%, который внутри div-блока
.products__list__item {...} // для li-элемента, который внутри ul-списка, который внутри div-блока
.products__list__item__thumbnail {...} // для div-блока, который внтри li-элемента, который внутри ul-списка, который внутри div-блока
.products__list__item__thumbnail__image {...} // для img, который внутри div-блока, который внтри li-элемента, который внутри ul-списка, который внутри div-блока
.products__list__item__link {...} // для a-элемента, который внтри li-элемента, который внутри ul-списка, который внутри div-блока
.products__list__item__description {...} // для параграфа, который внтри li-элемента, который внутри ul-списка, который внутри div-блока
.products__list__item__description_half-hidden {...} // для полускрытого параграфа, который внутри li-элемента, который внутри ul-списка, который внутри div-блока
 
Вот такой HTML-код, например:

<div class="products">
    <ul class="products__list products__list_half">
        <li class="products__list__item">
            <div class="products__list__item__thumbnail">
                <img class="products__list__item__thumbnail__image" src="" alt="" />
            </div>
            <a class="products__list__item__link" href="">...</a>
            <p class="products__list__item__description products__list__item__description_half-hidden">...</p>
        </li>
    </ul>
</div>
 
Получаются достаточно длинные имена классов, но они их потом специальными средствами минифицируют до рандомных двухбуквенных названий (например, вместо длинного класса .products__list__item__description получается .qe — буквы qe ничего не значат, просто генератор так сгенерировал):

<div class="rt">
    <ul class="mz da">
        <li class="rr">
            <div class="tu">
                <img class="zp" src="" alt="" />
            </div>
            <a class="lo" href="">...</a>
            <p class="qe bn">...</p>
        </li>
    </ul>
</div>
 
В результате получается быстрая отрисовка элементов (так как каскада нет) и сам HTML-код весит меньше — вообщем, быстрее загружается HTML-код и быстрее отрисовываются элементы. Ну и конечно же, больше простора для имен классов, никакие классы вообще пересечься не могут в принципе.
4
2

1. Во-первых вы нелогично называете идентификаторы тегов, section(раздел) их по логике может быть несколько, а идентификаторы должны быть уникальны
2. Если вы укажете как во втором случае, то если в какой-то ещё части страницы назовёте классы .header-h1 или .item, получите проблему потому что стили будут пересекаться.

Собственно как я называю классы и идентификаторы:
я делю макет на части, которые выделяю идентификаторами,
если внутри этих частей некоторые теги повторяются и требуют разных стилей я выделяю их классами

ну и пути я указываю как:
#блок .класс > тег, например
причём стараюсь делить так, чтобы в подобных цепочках было не более 3х селекторов

Получается достаточно ёмко и удобно.

0

Разница в том, что первый вариант распространяется на .header-h1 и .item только внутри #section и #section #menu, а второй вариант распространяется на все элементы этих классов (в любом блоке, не только #section).

-1