Внимание! Форум временно закрыт. Все вопросы вы можете задать на странице MaxSite CMS в Github

Об именовании CSS-классов

Свободное общение.
Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Об именовании CSS-классов

Сообщение MAX » 06 сен 2014, 12:54

Например в UIKIT есть классы uk-a, uk-h1 и т.п., которые дублируют обычные A, H1 и т.д. Или в бутстрапе есть .h1 = H1.

Или есть .img-rounded, хотя очевидно, что иначе как к IMG его применять не требуется: img.rounded. То есть тэги дублируются в имена классов.

По семантике вообще тёмный лес: например что это за класс .sr-only? А о .col-md-1, .col-lg-1 и .col-xs-1 можно легенды слогать. По мне так это «медицина», «лыжи» и xss-атака.

Отсюда, собственно, вопрос-предложение: можно было бы подумать об минимальном наборе css-классов, которые не имеют двусмысленности и могут просто и легко читаться. Примеры таких классов:

Код: Выбрать все

.bold
.italic
.text-right
.text-left
.text-center
.box-right
.box-inline
.box-center
.bg-red


Какие у вас есть ещё варианты?

Аватар пользователя
Cuprum
Модератор
Сообщений: 766
Зарегистрирован: 01 фев 2009, 21:22

Re: Об именовании CSS-классов

Сообщение Cuprum » 06 сен 2014, 13:16

А где они будут применяться практически? Для оформления текста внутри записи?

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 06 сен 2014, 15:58

Не обязательно. Предположим, что это некий абстрактный css-фреймворк. То есть не только оформление, но и структура блоков и т.п.

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 06 сен 2014, 21:43

Вот мои варианты для текста (без стилей):

Код: Выбрать все

// форматирование текста
.bold {}
.italic {}
.underline {}
.strike {}
.small-caps {}
.upper {}
.lower {}

// выравнивание
.text-right {}
.text-left {}
.text-center {}

// цвета
.text-white {}
.text-red {}
.text-black {}

.bg-white {}
.bg-red {}
.bg-black {}

// блоки
.clearfix {}
.box-right {}
.box-left {}
.box-center {}

Аватар пользователя
Cuprum
Модератор
Сообщений: 766
Зарегистрирован: 01 фев 2009, 21:22

Re: Об именовании CSS-классов

Сообщение Cuprum » 07 сен 2014, 21:16

Если о цвете текста, то можно и без слова text, просто .white, .black, .green и т.д. Тут название цвета говорит само за себя. Я понял, у тебя простые названия, т. е. одному классу соответствует только одно свойство? Если .text-right, то в правиле запишется только

Код: Выбрать все

.text-right {text-align: right;}

Если так, то можно в названии класса просто указывать сокращенное имя свойства и значение.
У меня в редакторе настроено разворачивание аббревиатур, и когда я печатаю fll, это разворачивается в float: left; Можно по аналогии сделать. Допустим класс .dib, которому соответствует

Код: Выбрать все

.dib {display: inline-block;}

Такой класс не зависит от контекста. + чтобы меньше путаться, все такие вспомогательные классы можно начинать с префикса "p", мол, это свойство: .p-dib.

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 07 сен 2014, 22:37

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

Группа хелперов:

  • «text-» - текст и его характеристики например text-center, text-red
  • «bg-» - фон чего-угодно, например bg-red, bg-gradient-blue
  • «box-» — параметры блока, например box-center, box-margin10
  • не допускающие двусмысленности, например: italic, bold, clearfix

Группа функциональности:

  • «layout» — связана с разметкой страниц
  • «grid» — связана с сеткой
  • «container» - обрамляющий (родительский) контейнер группы блоков
  • «wrap» - внутренний блок, выполняющий служебную функцию при верстке.
  • «icon» - иконки

Прочие «устоявшиеся»:

  • «w» - ширина

Как я выше написал, можно предположить, что речь идет об абстрактном «идеально семантичном» и понятном всем вебмастерам (и простым пользователям) css-фреймворке. Уровень входа в его классы очень-очень низкий.

Если с хелперами довольно просто, то например с layout могут быть более сложные стили. Наприме у меня есть класс layout-wrap-center. Но думаю, что если бы он назывался просто layout-center, то это было бы более понятным. Или, как пример layout-wrap-full менее понятен, чем layout-full-width.

Аватар пользователя
MAX
Администратор
Сообщений: 3179
Зарегистрирован: 31 янв 2009, 19:02

Re: Об именовании CSS-классов

Сообщение MAX » 08 сен 2014, 12:46

Пока здесь буду выкладывать свои мысли.

Идея в том, чтобы перенести часть верстки на уровень html-кода. Например, обычно делаются так:

Код: Выбрать все

<div class="main"><div class="wrap">
...
</div></div>


Где, отдельно задаём

Код: Выбрать все

.main {}
.main > .wrap {}


Вместо этого можно сделать так:

Код: Выбрать все

<div class="layout-center"><div class="bg-white box-indent20">
...
</div></div>


— где указанные классы где-то заранее предопределены. В последнем варианте ясная семантика и по-сути не требуется лезть в редактирование css.

Аватар пользователя
Cuprum
Модератор
Сообщений: 766
Зарегистрирован: 01 фев 2009, 21:22

Re: Об именовании CSS-классов

Сообщение Cuprum » 08 сен 2014, 16:35

Вот только всех вариантов все-равно не предусмотришь. Может это сработает на дефолтном дизайне, но если понадобится сделать что-то непохожее, то от классов вроде box-margin10, .box-indent20 мало толку. Как-никак, придется все писать вручную.

Аватар пользователя
searchingman
Модератор
Сообщений: 1392
Зарегистрирован: 28 май 2012, 16:02

Re: Об именовании CSS-классов

Сообщение searchingman » 08 сен 2014, 16:54

Закладывать в классы размеры и цвета неверно.
Из-за это можно нагородить кучу ненужных классов.
Затем кому-то потребуется еще это все запоминать. Зачем?

Kudesnik
Сообщений: 23
Зарегистрирован: 14 окт 2009, 12:09

Re: Об именовании CSS-классов

Сообщение Kudesnik » 08 сен 2014, 17:15

Сейчас есть несколько методологий верстки: БЭМ, SMACSS, MCSS, OOCSS.
Хорошо бы взять одну из них за основу.


Вернуться в «Курилка»

Кто сейчас на форуме

Пользователь просматривает форум: нет зарегистрированных пользователей

cron