Как называть html классы
Именование классов HTML элементов — это важный аспект создания структурированных и читаемых веб-страниц. Хорошее именование классов упрощает понимание и обслуживание вашего кода. Вот некоторые bewchcie советы по именованию классов в HTML:
1. Используйте описательные имена: Называйте классы на основе их описания и назначения. Подумайте о том, что делает элемент, и выберите имя, которое отражает его смысл. Например, если это меню навигации, класс может называться `nav-menu`, если это заголовок, то `page-title`.
2. Используйте семантику: Придерживайтесь семантических имен. Это означает, что вы должны выбирать имена, которые точно описывают, что представляет собой элемент. Например, для заголовков используйте классы `header`, `subheader`, `section-title`, а не `div1`, `div2`, `text`.
3. Избегайте имен слишком длинных: Имена классов не должны быть слишком длинными и громоздкими. Они должны быть легко читаемыми и запоминаемыми. Пытайтесь найти баланс между описательностью и краткостью.
4. Используйте дефисы или нижние подчеркивания: Разделяйте слова в именах классов дефисами (`my-class-name`) или нижними подчеркиваниями (`my_class_name`). Это делает имена более читаемыми и различимыми.
5. Избегайте ключевых слов и спецсимволов: Не используйте ключевые слова из HTML, CSS или JavaScript (например, `class`, `id`, `style`, `div`, `function`) в именах классов. Избегайте спецсимволов, пробелов и символов, которые могут вызвать проблемы при работе с CSS и JavaScript.
6. Согласуйте имена классов: Важно соблюдать согласованность в именах классов в вашем проекте. Если вы используете BEM, SMACSS или другую методологию, придерживайтесь их соглашений по именованию.
7. Имена классов и доступность: При разработке с учетом доступности обязательно убедитесь, что имена классов отражают функциональность элемента, особенно если они влияют на скрытые или специальные элементы интерфейса.
8. Контекст и область действия: Придерживайтесь той же семантики и именования в пределах определенной области действия. Например, если у вас есть блок «новости», используйте `news-title`, `news-image`, `news-description` и т. д.
9. **Краткость и ясность**: Старайтесь сделать имена классов краткими и ясными. Если имя класса становится слишком длинным и сложным, это может сигнализировать о необходимости пересмотреть структуру вашего HTML или CSS.
10. **Документация**: При необходимости добавляйте комментарии или документацию к вашим классам, особенно если они используются для стилизации сложных компонентов.
Применение этих советов поможет создать чистый, читаемый и поддерживаемый код, что облегчит разработку и сопровождение вашего веб-проекта.
Также можете использовать различные методологии, например БЭМ
Какие название используете для классов в HTML/CSS?
Какие название используете для классов в HTML/CSS?
Собственно, часто встречаюсь с проблемой в названии классов, идентификаторов и т.д..
Часто использую что то такое: container, wrapper, text, caption.
Но почти всегда их не хватает и не могу придумать что нибудь подходящее.
Приходиться делать так:
lorem ipsum lorem ipsum .first .text < color: #fff; background: #222; >.second .text
Правильно ли такое вообще делать?
И как быть?
Как вы действуете в подобных случаях?
- Вопрос задан более трёх лет назад
- 38534 просмотра
Комментировать
Решения вопроса 3
GoodProject @GoodProject
Верстальщик
.wrapper - /*обвертка сайта*/ .header - /*верхняя часть сайта*/ .sidebar - /*сайдбар (левая или правая часть сайта)*/ .content - /*тело сайта (центральная часть)*/ .footer - /*нижнаяя часть сайта*/Название блока (обвертка)
.bl .block .box .wrap .inner .container .main.head, .header - /*верхняя часть блока например заголовок*/ .cnt, .content, .body - /*тело блока например текс с картинкой*/ .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/Колонки
.column, .col — /*колонка*/
.list .item.top /* элемент сверху */ .left /* элемент слева float:left */ .right /* элемент справа float:right */ .bottom /* элемент внизу */ .center /* элемент отцвентрирован margin:0 auto; */ .fixed - /*фиксированный элемент postion:fixed */.next - /*следующий*/ .prev - /*предыдущий*/ .last - /*последний*/ .first - /*первый*/ .back - /*назад*/ .ahead - /*вперед*/.one .thwo .three .four .five.xs, .tiny - /*очень маленький*/ .s, .small - /*маленький*/ .md, .medium - /*средний */ .lg, .large, .big - /*большой */ .xl, .extra-large - /*очень большой*/.danger - /*цвет опасности*/ .default - /*стандартный цвет*/ .warning, .error - /*цве ошибки*/ .success - /*цвет успеха (к примеру верно введн код подтвержления)*/ .primary - /*основной цвет */.button, .btn - /*кнопка*/ .loading - /*загрузка*/ .close - /*закрыть*/ .open - /*открыть*/ .touch - /*клик*/ .edit - /*редактировать*/ .more - /*больше*/ .remove - /*удалить*/ .logout - /*выход*/ .select - /*выбрать*/ .divider - /*выпадающийся список меню*/ .caret, .arrow - /*стрелочка*/ .up - /* Вверх */ .down - /* Вниз */ .delete - /* удалить */ .reply - /*ответить*/.profile - /*профиль*/ .person - /*человек*/ .ava, .avatar - /*аватарка, картинка*/ .name - /*имя*/ .description - /*описание*/ .address - /*адресс*/ .nickname - /*ник*/ .birthday - /*дата рождения*/ .sex - /*пол*/ .author - /* автор */.title - /*заголовок*/ .short-title - /*скороченный заголовок*/ .full-title - /*полный заголовок*/Ссылки
.link — /*ссылка*/
.text, .txt, .paragraph - /*текст*/ .info, .information - /*информация*/.image, .img - /*картинка*/ .icon, .ic - /*иконка*/ .bg - /*фоновая картинки или цвет*/.search, .form-search - /*поиск по сайту*/ .input - /*текстовый элемент*/ .form - /*форма*/ .form-group - /*группа элементов формы*/ .help-block - /*текст подсказки*/ .label - /*название элемента формы*/.type - /*тип*/ .cat, .category - /*катигория*/ .subcat, .subcategory - /*подкатегория*/ .section - /*раздел*/ .subsection - /*подраздел*/.video .play - /*пуск*/ .stop - /*стоп*/ .pause - /*пауза*/.social - /* социальные сети */ .vk - /*вконтакте*/ .fb - /*фейсбук*/ .twit - /*твиттер*/ .inst - /*инстаграм */.none - /*скрытый элемент*/ .disabled - /*заблокированный*/ .active, .current - /*активный */ .selected - /*выбраный*/ .visible - /*видный элемент*/ .focus - /*нажатый*/.time - /*время*/ .date - /*дата*/ .day - /*день*/ .month - /*месяц*/ .year - /*год*/Очистка
.clear, .clearfix, .clr — /*очистка*/
.separator, .divide - /*разделитель вертикальный для слов */ .br, .line - /*разделитель горизонтальный для блоков*/.logo - /*лого сайта*/ .new - /*новинка*/ .sale - /*распродажа*/ .feedback - /*обратная связь*/ .support - /*помощь */ .group - /*группа*/ .module - /*модуль*/ .posters - /*пост*/ .form - /*форма*/ .tabs - /*вкладки*/ .slider - /*слайдер*/ .news - /*новости*/ .table - /*таблица*/ .full - /*полный*/ .breadcrumbs - /*Хлебные крошки*/ .pagination, .pager - /*Нумерация страниц*/ .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/ .dropdown - /*выпадающейся меню */ .comment - /*комментарий*/ .subscription - /* Подписка */ .special - /* особенный элемент */ .standard - /* стандартный элемент */ .screens - /* Скрины */ .rate - /* рейтинг */ .online - /* онлайн */ .panel - /* панель */ .popup - /* попап */ .version - /* версия */ .page - /* страница */ .banners - /* баннер */ .map - /* Карта */ .more - /*еще, подробнее*/ .tags - /* тег */ .price - /* цена */Как правильно назвать класс
Допустим есть базовый шрифт, который задан для body размером 14px. Есть ссылки, которые в большинстве случаев аналогичного размера, но встречаются места где такие же ссылки, отличаются только размером, т.е не 14px, а 12 или 16. Вопрос, как более правильно им давать класс? ведь надо давать класс из-за одного свойства всего лишь. Правильно ли дать класс .fs12 / .fs16? или link-small / link-large? И второй вопрос, лучше задать конкретно ссылкам класс, или может отталкиваясь от блока родителя задавать ссылке класс? к примеру так .block-parent a
Отслеживать
задан 22 июл 2021 в 23:02
15 3 3 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Однозначно ответить нельзя. Есть разные подходы и ситуации. Обычно есть какой-то компромисс и решение не идеальное с разных точек зрения. Бывает есть гайдлайны и там описаны все размеры и где они применяются, оттуда можно выделить классы. Чаще всего, особенно на фрилансе, всё это на усмотрение верстальщика, и выбор не сходится у разных людей. Из-за разного опыта или разной аргументации. Может быть например так:
- По умолчанию ссылка может брать размер от окружающего текста. Поэтому не следует задавать ссылкам размер для всего документа.
- Если по дизайну можно выделить постоянно повторяющийся размер текста, то можно сделать класс для него, не только для ссылок. Назвать лучше не числом, а словом типа text-small или text-middle , потому что число может измениться в будущем или на других размерах экранов (мобильники/телевизоры) в медиазапросах для данного класса. Вместо link-small обычно лучше text-small . Класс fs16 из вашего вопроса — это точно не правильно. Потому что вы через месяц или другой человек могут не понять что это значит.
- Если у ссылки можно определить какое-то предназначение, то лучше сделать класс предназначения, и в нём уже описывать особенности. включая размер. Например для тегов под постом класс post-tag и в нём размер.
- Если блок ссылок имеет какое-то особое назначение, например блок тегов, то селектор со стилем ссылки может отталкиваться от родителя, как вы описали в конце вопроса.
Отслеживать
ответ дан 23 июл 2021 в 0:04
user347472 user347472
Все перечисленные варианты правильны, т.к. все они валидны с точки зрения синтаксиса CSS. а других правил не существует.
Говоря не о правильности, но о хороших практиках в верстке. и не только в контексте вопроса, а о том что касается именования в целом:
- Читать имена-с-разделителями гораздо легче, чем именабезразделителей , и особенно когда в именах используются числа
- Имя утилити-класса логически должно соответствовать общему назначению, оно не должно быть привязано по смыслу к каким-то частным случаям применения
(что если нужно будет еще и параграфу уменьшить шрифт. добавим ему нелогичный класс .link-small , или внесем еще один класс .paragraph-small ? Все это как-то неуклюже и неудобно. гораздо лучше, когда класс изначально назван как .font-small , например) - Имена по сущности, должны описывать именно сущность (например, .receipt-link ), а не ее визуальные свойства / зависимость / тип элемента / и т.д.
(насчет типа спорно, т.к. есть распространенное мнение что например .link лучше чем a в плане специфичности. но сторонники такого мнения почему-то не могут внятно объяснить зачем же создавать в стилях такие серьезные проблемы приоритета, которые вынуждают повышать специфичность базовых стилей «зеркаля» типы элементов классами) - Имена характеризующих свойств желательно переиспользовать, если они применимы к нескольким сущностям
(например, вместо .menu-item-active и .invoice-form-active использовать .menu-item.active и .invoice-form.active — добавляя класс используемый только вместе с классом какой-либо сущности, но не сам по себе) - Именование по сущности/характеристике предпочтительнее именования по значению
(потому что если придется менять значения свойств — то придется менять и имена классов, например подобное будет с .fs-12 . тогда как с характеризующим именем, например с тем же .font-small , переименований не потребуется)
лучше задать конкретно ссылкам класс, или может отталкиваясь от блока родителя задавать ссылке класс?
Вопросы такого рода уже не совсем об именах, они больше о методах организации стилей.
Если на уровне частного мнения, то я бы посоветовал использовать утилити-классы размера шрифта (типа .font- ) редко и точечно, на «особых» ссылках которые являются исключением из правил — а в большинстве остальных случаев, при зависимости от «места использования», применять селектор с комбинатором потомка (то есть, в контексте той сущности, к которой относятся ссылки).
Вот представь, что у тебя есть компонент «уведомление», в котором находится некий текст со ссылками на разделы сайта, плюс в нижней части уведомления еще содержатся ссылки с контактными данными (mailto:). Добавлять каждой из ссылок утилити-класс будет менее удобно, чем сначала описать общие стили ссылок в этом компоненте ( .notification a ) и затем лишь уточнить их для «подвида» контактных ссылок ( .notification .contacts ). ведь это схожие элементы — при грамотном дизайне, многие стили у них будут одинаковы. А еще, утилити-классы обманчиво удобны и поэтому имеют тенденцию разрастаться: в один прекрасный момент, ты можешь обнаружить себя выстраивающим целые поезда из классов, типа class=»underline-dashed font-small has-icon icon-left color-darkgreen hover-fade » — это безусловно жесть, которую трудно читать и поддерживать (т.к. вспомогательные классы предполагают !important , а это ведет к проблемам приоритета).
// Пожалуйста, пожалуйста, не именуй классы как .block : мало того что этот фрагмент никак не описывают именуемое, он еще и прочно ассоциируется с низкой технической грамотностью: когда у веб-специалиста в разметке и речи только «блёк, блёк» — о нем может сложиться негативное мнение (появляются сомнения насчет того, отличает ли он блок от html-элемента и структурного компонента страницы, понимает ли верстку в принципе, и т.д.).
// Еще, маленький совет относительно значений: в размерах шрифтов, вместо px лучше использовать rem или em (для того чтобы они масштабировались от «базового» размера шрифта браузера либо родителя). И не стоит указывать размер шрифта в стилях body — так ты делаешь неэффективной соотв. настройку браузера, а пользователей весьма раздражает необходимость вручную менять масштаб.
как оглавлять классы в html
у меня вопрос
как оглавлять классы div в html
Допустим верхнюю часть страницы мы называем
Нижнюю
есть ли полный список названий дивов?
2 ответов
Обычно идет именование по смыслу, если новости, то можно назвать блок news. А сами названия тегов и классов зависит от спецификаций — html5 или html4. В html4 можно написать , в html5 можно написать . В общем нужно по смыслу называть class.
сначало шапка далее внутри которого можно вписать скоко угодно классов, можно придумывать по подходящему смыслу контента. и в конце