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

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

Свободное общение.
Аватар пользователя
vimruler
Сообщений: 401
Зарегистрирован: 13 май 2009, 09:31

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

Сообщение vimruler » 15 сен 2014, 19:00

MAX писал(а):10. Иконки. Выделяется в отдельный файл, поскольку код иконок может оказаться достаточно объемным. Если раньше я включал в стили все font_awesome, то сейчас оптимальным будет прописывть стили только под какие-то выбранные иконки.


Да, font_awesom продолжают наполнять иконками и за обновлениями шрифта гнаться немного утомительно. Всё равно если что-то нужно, то удобнее заглянуть в шпаргалку шрифта и выбирать там подходящую иконку. У меня есть только наблюдение, что если в less используется отличное от стандартного для шрифта название иконки (сейчас не могу найти пример, но помнится натыкался на такое), то её немного сложнее искать - есть ли в заготовках или нужно свою определять? Сейчас приходится искать по коду &#xf...

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

В общем, поддерживаю.

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

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

Сообщение MAX » 15 сен 2014, 19:17

Да, с этим шрифтом много путаницы. Я сделал чуть проще. У них есть в дистрибутиве less переменные, гда заданы все символы. Себя сделал аналогично:

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

@f_awesome_adjust: "\f042";
@f_awesome_adn: "\f170";
@f_awesome_align-center: "\f037";
...


Дальше только @переменную подставляю к нужной иконке.

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

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

Сообщение MAX » 15 сен 2014, 21:02

Теперь вопрос ко всем. Что означают эти классы?

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

.box-mp { }
.box-mp-tb { }
.box-mp-rl { }

.box-mp-small { }
.box-mp-tb-small { }
.box-mp-rl-small { }

.box-mp-large { }
.box-mp-tb-large { }
.box-mp-rl-large { }


.box-m { }
.box-m-tb { }
.box-m-rl { }

.box-m-small { }
.box-m-tb-small { }
.box-m-rl-small { }

.box-m-large { }
.box-m-tb-large { }
.box-m-rl-large { }


.box-p { }
.box-p-tb { }
.box-p-rl { }

.box-p-small { }
.box-p-tb-small { }
.box-p-rl-small { }

.box-p-large { }
.box-p-tb-large { }
.box-p-rl-large { }


Приводите свои догадки.

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

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

Сообщение Cuprum » 15 сен 2014, 23:08

MAX
Блоки с margin и padding. Слева-справа, сверху-снизу? Только не знаю, как это может помочь? Какой фреймворк не придумывай, все равно получается bootstrap ;) Может лучше попробовать посмотреть в сторону БЭМ? Правда, это не фреймворк, а в целом поход к верстке и сопутствующему. Там есть здравые вещи. Вот недавно была хорошая статья.

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

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

Сообщение MAX » 16 сен 2014, 09:33

Да, margin и padding. Смысл вот в чём: есть некоторые «типовые оступы»: обычный, например 20px, small - 5px и large - 50px. Соответственно нужны все их комбинации хотя бы на уровне top-bottom и right-left.

Использовать в разных ситуациях:

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

<div class="layout-full"><div class="bg-gray-dark box-p-tb-small box-p-rl-large">
   <h1 class="text-white">Заголовок</h1>
   <h2 class="text-white">Подзаголовок</h2>
</div></div>


Как правило отступы задаются в пределах сайта одни и те же (в 2-3 вариациях). То есть достаточно использовать соответствующие классы.

А вот то, что имя класса выглядит большим — это минус. Но каким образом его ещё уменьшить???

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

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

Сообщение MAX » 16 сен 2014, 09:41

БЭМ, конечно, хорошо, но слишком много там минусов. Не стоит забывать, что эта система была изначально задумана для «машинной» верстки. Поэтому имена классов, да и всю разметку делает программа. То есть чтобы использовать бэм нужно прицепить и весь их сопутствующий функционал. Да и нет у них ясных правил именований. С учетом каскадности CSS (от которой они отказались в пользу создания каждого класса каждого элемента), весь этот бэм заменяется на css-ные «>» и «+». :)

Если и обратить внимание на css-методику, то это SMACSS http://smacss.com/book/categorizing Из непонятного там только State, а остальное в общем-то общепринятые вещи.

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

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

Сообщение MAX » 16 сен 2014, 15:08

Grid. Пожалуй, самая больная тема.

1. «Классический» вариант с float отлично работает до тех пор, пока между колонками не требуется разделитель или отступ. В этом случае начинается великое шаманство с width. Сюда же накладывается проблема адаптивности. То есть вариант годится для случаев, когда ширина задается точно, например 25%, 20% и т.п., а все отступы, границы задаются уже в пределах каждой колонки.

2. Вариант с display: table. Как бы вроде рабочий, но накладывает некоторые ограничения связанные с отображением таблиц. Для небольших сеток, где еще и требуется единая высота колонок, вариант приемлемый.

3. Flex. Самый передовой и самый лучший вариант. Но есть ограничения по браузерам. http://caniuse.com/#search=flex Традиционно это IE. Если «забить» на его 10 версию и ниже, то в принципе grid однозначно дожна быть только flex.

4. Вариант с Inline. Тоже имеет право на жизнь, но есть сложности с форматированием html - нужно чтобы между ячейками не было пробелов.

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

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

Сообщение MAX » 16 сен 2014, 15:54

В чем сложность в float? Довольно сложно задать отступы между колонками.

Например, есть 4 колонки. По-идее все они должны быть width: 25%. Это если без отступов. Если нужны отступы, то они тоже участвуют в общей 100%-ширине. Пусть по 2%. Тогда 3*2% = 6% (все отступы), 100-6 = 94% (остаток на колонки), 94/4 = 23,5% (одна колонка).

В css отступ можно задать черз margin-left (или right — не важно), а для первого элемента (:first-of-type) левый оступ обнуляем.

По этой схеме работают многие css-фреймворки, с разными вариациями margin-left + margin-right, padding'и и т.п.

Расчитать width для таких колонок не проблема. Сложности возникают там, где нужен другой вариант отступа (не 2%, а 8% или фиксированный в 15px).

Вторая проблема — адаптивность. Сейчас это делается так: http://maxsite.org/page/adaptive-css-grids Несколько классов для разных @media. Скажем в обычном варианте колонки по w1-4, а в phone-варианте w1-2 — здесь третья колонка уже должна иметь нулевой margin-left. Автоматом его вычислить невозможно, приходится идти на кучу ухищрений. Файл grid.less в любом фреймворке этому наглядное подтверждение.

Исходя из вышеизложенного стоит задача по созданию сетки:

— простая семантика div.grid div.col
— гибкая система width, хотя ба на уровне wX-Y или wX%
— адаптивность
— отступы между колонками и границы border по возможности.

Если у кого-то есть готовые разработки, кидайте ссылки.

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

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

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

MAX писал(а):Да и нет у них ясных правил именований.

Дык давайте придумаем ).
По поводу каскада - там где есть какое-то нестандартное отображение, возможно это и лучше. Но если говорить о чем то стандартном, то нет. Возьмем к примеру виджет. Сам блок у нас определен как .widget, его заголовок как .widget_header. Это удобнее, чем какой-нибудь условный селектор .widget h3.
SMACSS, да неплохой подход. State - это состояния в каких блок или элемент может пребывать. Кликнули - блок пропал, у него появился предопределенный класс is-hidden. Все четко.

По поводу margin и padding. У тебя они жестко заданы, а если надо внести какие-то значения?

По поводу float, а какие там проблемы? {box-sizing: border-box;} сейчас вроде все браузеры поддерживают.

Flex - да, вкусная вещь. Практически, правда, на ней ничего еще не делал.

Зы. Тут вон люди все на атрибуты предлагают переводить. Не валидно только (или использовать data-...).

А, про float понял. Ты имеешь в виду, через less трудно рассчитать?

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

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

Сообщение MAX » 16 сен 2014, 22:40

По поводу каскада - там где есть какое-то нестандартное отображение, возможно это и лучше. Но если говорить о чем то стандартном, то нет. Возьмем к примеру виджет. Сам блок у нас определен как .widget, его заголовок как .widget_header. Это удобнее, чем какой-нибудь условный селектор .widget h3.


Конечно, если это как-то предопределено, то класс можно и отдельно вынести. Но всё-таки это несколько «нетиповой» вариант.

По поводу margin и padding. У тебя они жестко заданы, а если надо внести какие-то значения?


Попробую объяснить. Есть некий дизайн. Делаем шаблон. Для верстки используем LESS. В нем определены @переменные, через них, собственно, и выставляем нужные отступы.

Но, отдельно отмечу, что я не зацикливаюсь только на шаблонах MaxSite CMS. Ты точно знаешь сколько времени и сил было потрачено на отработку текущих main.php. Один А8 чего стоил. :) Концепция D3 позволяет создавать шаблон без оглядки на любые другие стили. Элементарный reset сейчас проигрывает normalize, но мы не можем его использовать из-за конфликтов стилей. Поэтому если и предлагать какой-то новый вариант верстки, то только универсальный, подходящий под разную задачу. Бутстрап тоже начинался с верстки твиттера. Оглядываясь на текущие современные фреймворки, мы можем сделать свой вариант ничем не хуже.

По поводу float, а какие там проблемы? {box-sizing: border-box;} сейчас вроде все браузеры поддерживают.

Flex - да, вкусная вещь. Практически, правда, на ней ничего еще не делал.


Пример использования:

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

   <div class="grid flex">
     <div class="w45 w100-medium w100-small">...</div>
     <div class="w25 w60-medium w100-small">...</div>
     <div class="w25 w35-medium w100-small">...></div>
   </div>


После flex возвращаться к другим псевдо-сеткам нет никакого желания. Лично я за flex уже сейчас!


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

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

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

cron