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

Question

Как вы, скорее всего, уже знаете, в 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?

Answer 1

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

Вот почему можно использовать оба варианта.

Answer 2

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

Answer 3

Я думаю, что это правильно.

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

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

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

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

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

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

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

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

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

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

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

$ ( 'div.toolTip') addClass ( 'открытый');.

вместо

$ ('div.toolTip'). Css ({display: 'block' ... и т. Д.});

пс. Я не думаю, что это то место, где можно задаться вопросом Class vs ID, это действительно другая дискуссия!

Answer 7

Как правило, мне нравится использовать префикс в моих классах, чтобы я знал, что класс в файле 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);
        ...

Answer 8

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

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

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

Answer 9

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

Answer 10

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

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