Неправильное использование атрибута класса 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 ответов
"класс" на самом деле является частью данных документа (и, надеюсь, семантически релевантным), а не его стилем или дизайном.
вот почему это нормально использовать для обоих.
- это совершенно правильный подход для этого.
- атрибуты класса не определяют поведение-JS делает это через CSS селекторы (спасибо jQuery).
- атрибуты класса не определяют визуальные стили-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 и использует разные классы в качестве пользовательских тегов. Они не упоминают о смешении классов с поведением.