Веб-разработчики (то есть вы) могут создавать классы CSS и имена идентификаторов и использовать эти имена для идентификации элементов Div и других элементов и тегов страницы. Разработчики, называя CSS-селекторы, которые переопределяют XHTML-теги (теги), должны убедиться, что они точно соответствуют предопределенным тегам, но что касается имен селекторов классов и идентификаторов, это вопрос мнения. Однако называть эти классы и идентификаторы по своему усмотрению — не очень хорошая привычка.
Прочитав серию статей о классах CSS и соглашениях об именах идентификаторов, написанных Энди Кларком (из «Stuff and Nonsense and All That Malarkey») и Эриком Мейером, я начал задумываться об использовании классов и идентификаторов в процессе проектирования моего собственного веб-сайта. Метод именования.
Интуитивное именование
При разработке веб-страницы и необходимости идентификации Div наиболее естественной идеей является назвать элемент, используя слова, описывающие его расположение на странице. При таком подходе имена классов и идентификаторов выглядят следующим образом:
верхняя панель
горизонтальная навигация
левая сторона
центральная колонна
правый столбец
Это допустимые способы именования классов и идентификаторов CSS и XHTML. Эти термины просты и наглядны, что позволяет идентифицировать элементы страницы и соответствующие им стили CSS.
Проблема в том, что такое имя связано с конкретным выражением содержимого страницы. Эти имена относятся к положению элементов страницы в определенном макете страницы, поэтому их использование за пределами такого макета было бы неуместным или даже сбивающим с толку. В то же время эти названия не затрагивают структуру содержания документа. Поэтому вот лучший способ назвать классы и идентификаторы CSS.
Структурированное именование
Структурированная разметка означает полное отделение информации о выражениях/местоположении от контента, включая имена классов и идентификаторов, появляющиеся в разметке.
Связанная с тегами информация используется для описания структуры документа, а не его внешнего вида. Эта функция позволяет нам повторно использовать контент и разметку в разных форматах внешнего вида, просто меняя CSS. Когда вы поймете этот метод, легко обнаружить, что использование позиции страницы для именования классов и идентификаторов совершенно неуместно при работе с такими форматами внешнего вида, как аудио. Следовательно, классы и идентификаторы должны быть структурированы и названы в зависимости от их назначения в документе, а не от того, где они появляются.
Имена классов и идентификаторов могут быть структурированы, как показано ниже:
брендинг
главная навигация
субнавигация
основной контент
боковая панель
Эти имена так же легко понять, как и интуитивно понятные соглашения об именах, но они описывают роль элемента страницы, а не его местоположение. Это делает код более совместимым с первоначальным намерением использовать чистую структурную разметку, то есть разработчики могут обрабатывать форматы отображения на различных носителях без изменения разметки.
Даже если вы не планируете форматировать свои веб-страницы на других носителях, использование структурированного именования может помочь вам упростить будущие обновления или редизайн сайта. Например, структурированное именование позволяет избежать путаницы, когда элемент div с одинаковым идентификатором правого столбца перемещается в левую часть страницы. Такое название боковой панели div является более подходящим, поскольку независимо от того, на какой стороне страницы она отображается, имя по-прежнему интуитивно понятно и легко понятно разработчикам.
некоторые соглашения об именах
Энди Кларк проанализировал исходный код 40 веб-сайтов, созданных разработчиками, пропагандировавшими стандартизированные концепции веб-дизайна. Хотя имена классов и идентификаторов очень противоречивы, некоторые часто встречающиеся имена все же встречаются. Пример списка наиболее часто используемых имен классов/идентификаторов приведен здесь:
заголовок
содержание
навигация
боковая панель
нижний колонтитул
Означают ли эти общие имена классов и идентификаторов рождение стандарта или формирование общепринятого соглашения? Хоть я и надеюсь на это, я так не думаю. Мне бы очень хотелось увидеть набор стандартов именования для общих элементов страницы, которые мы видим каждый день. В то же время использование стандартизированного метода именования может облегчить поиск элементов страницы и обновление веб-сайта, особенно когда вам необходимо в разное время переключать работу между сайтами, разработанными разными разработчиками.