Это плохая практика - многократно использовать один и тот же класс, но с разными стилями? - PullRequest
Новая
       36

Это плохая практика - многократно использовать один и тот же класс, но с разными стилями?

1 голос
/ 30 января 2012

Например, я хочу сделать что-то в первом <li class="first"> списке <ul>.

и я пишу CSS: 

ul .first{
    /*awesome code here*/
}

Но затем я также хочу дать определенный CSS первому <p class="first"> моего <div id="content">.

и я делаю это так: 

#content .first{
    /*awesome code here*/
}

Если вы не заметили, я повторно использовал класс first, чтобы дать совершенно разные стили двум совершенно разным случаям.

  • Разве плохо использовать классы таким образом?
  • Есть ли вероятность, что это приведет к глюкам / ошибкам?

Ответы [ 3 ]

2 голосов
/ 30 января 2012

Я в порядке, потому что когда вы намеренно определяете, как будет выглядеть первый элемент и абзац вашей структуры.Хотя было бы лучше, если бы вы использовали псевдоселектор first-child, но опять-таки оба будут иметь разные стили, потому что это именно то, что вы хотите.Мне также интересно, что вы имели в виду под повторным использованием кода в данном случае?

Если вы собираетесь использовать ul.first, вам придется изменить

<li id="first" на <li class="first"

0 голосов
/ 30 января 2012

У вас есть ошибки в вашем CSS.

Если вы хотите применить правило к первому li в ul, при условии, что у вас есть следующий HTML: 

<ul>
    <li class="first">Something</li>

Ваш CSS должен выглядеть следующим образом 

ul .first {
/* Some code here, notice the space above */
}

То же самое относится и ко второму утверждению. Написав #content.first, вы говорите: «Я имею в виду объект с идентификатором, подобным content , а имеет класс first». Если вы добавите пробел, #content .first, вы тогда будете иметь в виду «Я хочу выбрать объект, который имеет класс first и находится внутри объекта, которому присвоен идентификатор content».

Но, чтобы ответить на ваш вопрос, это неплохая практика, наоборот - рекомендуется по смысловым причинам.

0 голосов
/ 30 января 2012

Этот подход следует использовать только при совместном использовании стилей между элементами. Это на самом деле одна из причин наличия классов в CSS. Поэтому вам не нужно повторять один и тот же стиль для разных элементов. Если вы попытаетесь применить два разных значения для одного свойства, то начальное значение будет перезаписано.

Например: 

.first
{
color: blue;
color: red; 
}

Второй стиль заменит первый. Кроме того, даже если вы не перезаписываете исходное свойство, вы все равно можете столкнуться с проблемами отладки ошибок стиля. Например, у вас есть встроенные элементы и элементы уровня блока, поэтому в таких случаях вы можете столкнуться с проблемами при использовании этого подхода.

Обновлено: Сделано общее заявление о CSS классах более общим. ;)

...