Неправильное использование атрибута класса CSS или допустимого шаблона проектирования?

Как вы, скорее всего, уже знаете, в JQuery просто выбрать все элементы в документе, которые имеют определенный класс CSS, а затем, используя цепочку, назначить общие обработчики событий выбранным элементам:

$(".toolWindow").click(toolWindow_click);
$(".toolWindow").keypress(toolWindow_keypress);

как обычно класс "toolWindow" также обычно определяется в CSS и связан с некоторыми визуальными стилями:

.toolWindow{
   color:blue;
   background-color:white;
}

атрибут class теперь отвечает за указание не только внешнего вида (визуального состояния) элемента, но и поведение. В результате я довольно часто использую этот подход и определяю имена классов CSS больше как псевдо-объектно-ориентированные классы, чем визуальные только классы CSS. Другими словами, каждый класс представляет как состояние (стили CSS), так и поведение (события).

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

кроме того, плагин jQuery LiveQuery (и встроенная функция live ()) делают это подход еще более эффективен путем автоматической привязки событий к динамически создаваемым элементам, принадлежащим определенному классу.

в последнее время я в основном использую имена классов как определение общего набора поведения для связанных элементов DOM и только позже использую их для определения визуального стиля.

вопросы: это ужасное злоупотребление атрибутом CSS "class", если да, то почему?

С другой стороны, возможно, это совершенно правильный подход к дальнейшему реализация "отдельных проблем" и улучшение ремонтопригодности страниц HTML/DHTML?

11 ответов


"класс" на самом деле является частью данных документа (и, надеюсь, семантически релевантным), а не его стилем или дизайном.

вот почему это нормально использовать для обоих.


  1. это совершенно правильный подход для этого.
  2. атрибуты класса не определяют поведение-JS делает это через CSS селекторы (спасибо jQuery).
  3. атрибуты класса не определяют визуальные стили-CSS правила сделать это.

Я думаю, что это perfctly действует.

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

плохие имена классов (согласно моему правилу):

<span class="brightRedBold">Wear Protective Gloves</span>
<a class = "openInNewWindow" ...>

на мой взгляд, это так же плохо, как писать стили в строке и javascript

хорошие имена классов:

<span class="urgentWarning">Wear Protective Gloves</span>
<a class = "offSiteLink" ...>

Вы можете прикрепите любые стили и поведение, которые вы хотите, к этим классам и придумайте гораздо более последовательный и поддерживаемый дизайн. Попробуйте определить разговорный стиль для "brightRed", например.


Я не думаю, что с ним что-то не так. Чтобы быть в безопасности, вы всегда можете убедиться, что классы, используемые для поведения, отделены от классов, используемых для презентации.

в своем корне сила jQuery заключается в использовании синтаксиса селектора CSS для манипуляции DOM. Этот синтаксис был предназначен для CSS, для презентации, в начале. Однако использование его для определения поведения (независимо от того, выбираете ли вы классы или нет) оказалось действительно мощным метод. Кто может возразить?


Я стараюсь использовать идентификаторы везде, где это возможно, и избегать классов. Это не сказать, что его плохое использование их, довольно contray. Но я считаю, что если вы используете IDs, ваш в некотором смысле вынужден использовать очень структурированную и значимую семантическую разметку. Если вы выплевываете классы каждый раз, когда вам нужен элемент, чтобы посмотреть определенным образом-вы, вероятно, делаете это неправильно.

Это довольно спорная тема, так что это именно то, что я бросаю в кастрюлю.


Это совершенно нормальный подход, и очень много, что атрибут class должны использоваться для.

Я бы сказал, что если класс потребляется только jQuery, а не CSS, хорошо иметь четкое соглашение об именах, которое указывает на использование-если не для себя, то, по крайней мере, для тех, кто может работать с вашим кодом, см. Класс, который не упоминается в CSS, а затем удалите его :)

У меня есть определенное имя класса, которое идентифицирует назначение объекта и, далее, часто довольно общее звучание, имена классов, которые определяют состояние объекта. например!--3-->

class= "toolTip" - подсказка class= "toolTip open" - Подсказка в отображаемом состоянии

таким образом, вы можете легко обобщить соглашение об именах для поведения (и потенциально JS-код для них).

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

$('div.toolTip').addClass ('open');

, а не

$('div.toolTip').css ({display: 'block' ... и т. д. и т. д. });

ps. Я не думаю, что это место, чтобы попасть в класс против вопроса ID, это действительно другая дискуссия!


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

в противном случае, я все еще думаю, что это нормально, но я бы, вероятно, определил отдельный (пустой) класс css для управления поведением, чтобы сохранить разделение проблем.


Я использовал это для установки фильтров нажатия клавиш только для числовых полей. Класс будет "числовым", "десятичным", "отрицательным десятичным" или "десятичным списком" (разрешить запятую и Пробел). Это тоже было очень легко прочесть.


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

<div class="draggable sortable droppable list-item editable text">text</div>

есть некоторые вещи, такие как флаги, которые вы можете назначить с помощью метода data() в jQuery. Я бы хотел, чтобы данные jQuery() превратились в инструмент, подобный тому, как мы используем классы.


в качестве соглашения Мне нравится использовать префикс для моих классов, чтобы я знал, что класс в файле css привязан к коду Javascript. Например, используя префикс" Js":

.JsButton { ... } .JsToggleElement { ... }

другое соглашение было бы просто использовать обычно только строчные буквы для классов css и идентификаторов (остерегайтесь, что некоторые браузеры чувствительны к регистру!), и использовать CamelCasing для Javascript-привязанных классов.

почему все это часто бывает класс, привязанный к поведению, будет удобно принимать правила стиля.

Я рассматривал также создание классов исключительно для поведения Javascript и использование класса seaprate для стиля, но это много расщепления волос ни за что. Вместо этого я бы предпочел просто четко определить классы в коде Javascript:

mySuperObject =
{
    CSS_TOGGLE: 'JsToggle',
    CSS_HIDE:   'JsHide',

    initialize:function()
    {
        var elems = SomeJsLib.getElementsByClassname(document, 'a', this.CSS_TOGGLE);
        ...

на самом деле, я не хочу проливать дождь на этот парад, потому что он кажется кошерным де-факто. Однако я также вижу, что никто не упомянул http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#class-html в нижней части которого раздел W3 рекомендует не использовать имена классов CSS для формирования нестандартных микро-синтаксисов. Я думаю, что они в основном предупреждают нас не делать страницу, которая полностью состоит из элементов DIV и SPAN и использует разные классы в качестве пользовательских тегов. Они не упоминают о смешении классов с поведением.