Вы когда-нибудь устанавливали класс для вашего CSS, который использует его несколько раз?

Question

Мне всегда говорили убрать несколько свойств в вашем css, которые вы используете более одного раза, и добавить их все в одно правило.Как ниже.(прошу прощения за плохой пример)

Я всегда видел это:

.button, .list, .items { color: #444; }

С несколькими правилами, разве это не может оставить много беспорядка?

Только в уроках и примерах css я видел это:

.someColor { color: #444; }

А в css просто добавьте еще один класс .sameColor.(div class = "button someColor")

Я никогда не видел этого и чувствую, что это оставит меньше помех в вашем CSS.Это было бы хорошо?Или вы думаете, что это может оставить больше беспорядка в вашем HTML?

Answer 1

Попробуйте назвать ваши классы независимо от их визуального эффекта. Для CSS характерно играть с дизайном и версткой без изменения HTML. Имена классов, такие как .someColor или .left-sidebar, являются плохой практикой. Цвета и положение могут меняться. А также применять правила к семантическим HTML-элементам, а не добавлять классы для всех различных элементов div и span. Это должно быть очевидно, хотя многие ошибаются.

CSS - это ограниченный набор правил, что делает его идеальным стимулятором творчества.

Answer 2

Здесь много хороших ответов. Хитрость заключается в том, чтобы выяснить, какая из них лучше всего подходит для вашей ситуации.

Одна вещь, которую нужно учитывать, это размер вашей разметки. В ситуации с высоким трафиком размер разметки имеет решающее значение для скорости загрузки страницы ... каждый байт имеет значение. Если это так, то вы, возможно, захотите создать больше классов CSS и поместить меньше в свою разметку. Таким образом, клиент больше кеширует, а ваш сайт работает меньше.

Answer 3

Вполне допустимо применять несколько классов к элементам HTML. Хитрость заключается в том, чтобы быть разумным; Я обычно нахожу, что, когда я делаю это, дополнительные классы являются дополнениями или исключениями к применяемому базовому стилю. Например, вот некоторые классы, которые я иногда добавляю к элементу, который уже имеет класс:

• error - для стиля текущего элемента, если пользователь ввел неверные данные
• first - для стилизации первого элемента в списке или в строке таблицы, например, подавить отступ слева - 1008 *
• last - для стилизации последнего элемента в списке или в строке таблицы, например, подавить поле справа
• even - применить зебра-чередование к альтернативным элементам
• hidden - скрыть элемент, если он в данный момент не актуален

Эти дополнительные классы обычно генерируются динамически на серверном языке, таком как ASP.NET или PHP. Они также могут быть добавлены или удалены на стороне клиента с помощью JavaScript, особенно. с библиотекой, как JQuery. Это особенно полезно для отображения или скрытия элементов в ответ на событие.

Answer 4

Хорошие имена классов и идентификаторы - это первое место, которое вы должны оптимизировать.Затем перейдите к нескольким именам классов.

Несколько имен классов могут помочь, хотя, подумайте:

<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
    <div class="rightColumn">Right</div>
    <div class="middleColumn hasRignt">I have padding right of 210px</div>
       <!-- or -->
    <div class="leftColumn">Left</div>
    <div class="middleColumn hasLeft">I have padding left of 210px</div>
       <!-- or -->
    <div class="middleColumn">I have no padding</div>

и ваш css

.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }

Результат смещенправый / левый столбцы и центральная область компенсируют их заполнением.Это означает, что вы можете стилизовать middleColumn так, как хотите (например, .middleColumn .otherCoolSelector).

Answer 5

Все это основано на личных предпочтениях. Я испробовал оба метода и предпочел второй метод, который вы перечислили, за исключением более общих имен классов, таких как middleParagraph или headerGraphic, поэтому он применяется к области, а не к определенному цвету, поскольку цвета могут меняться.

Answer 6

То, что вы предлагаете, немного похоже на стиль строки, например стиль = "цвет: # 444". Поэтому, если вы хотите изменить цвет вашего элемента, вам нужно будет изменить html, что означает, что вы определили стиль как часть вашего контента. Именно этого и следует избегать в css.

Представьте себе, если бы вы включили «someColor» несколько раз в несколько html-файлов и решили, что некоторые из этих элементов не должны иметь «someColor», в конце концов, вам нужно пройти через много файлов.

Я бы, вероятно, тоже избежал опцию списка, если я создаю компонент, скажем кнопку, я хочу найти класс .mybutton в моем файле css и увидеть все правила для этого компонента, без необходимости проходить через всевозможные бесполезные глобальные классы. Также, если кто-то придет и изменит цвет в нашем глобальном классе, он может сломать мою кнопку, и, как если бы кнопка контролировала свои собственные стили, она не может быть нарушена таким образом.