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

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

Свободное общение.
Аватар пользователя
SWAT
Модератор
Сообщений: 280
Зарегистрирован: 25 июн 2010, 11:52

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

Сообщение SWAT » 17 сен 2014, 01:17

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


В бутстрапе мне не нравилось то, что если ты не используешь стили - они один хрен висят мертвым грузом. Поэтому я всегда использую свой css. Не знаю, возможно это мое неверное мнение (так как я только пробовал фреймворки, и потом кидал их).

Быстрая верстка? Возможно. Но люблю красивый и продуманный код, с хорошей оптимизацией. А не тяп-ляп.

Смысл по моему должен быть в том, что бы облегчить жизнь разработчику, а не продумать за него все возможные варианты, прописав тем самым 2 тонны кода, который не будет использоваться.

Все таки человек должен что то уметь делать сам :D

Например мне проще конкретно дописать стили для какого нибудь блока, которому требуется какой то индивидуальный отступ, а не дописывать ему совершенно левый класс.

За счет такой "предусмотренности" и HTML и CSS длиннее в несколько раз получаются.

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

А если мы введем официальные сокращения для найболее частых названий? Тем более что ты уже начал их использовать.

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

Например:
b = box
sm = small
lg = large
t = top
l = left
b = bottom
r = right
http://master-css.com
Майн блогген :)

Аватар пользователя
SWAT
Модератор
Сообщений: 280
Зарегистрирован: 25 июн 2010, 11:52

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

Сообщение SWAT » 17 сен 2014, 01:49

3. Flex. Самый передовой и самый лучший вариант. Но есть ограничения по браузерам.


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


Скажу так :ugeek: :
В начале были печальные странички текста.
Затем появились таблицы (табличная верстка) и мир приобразился.
Затем началась эра флоатов
Потом поехали инлайны и т.д. и т.п.

Когда-то в конце 2009 года я послал нахер хаки под ie7 и ниже. Отказавшись от их поддержки полностью. Получал много критики от отдельных критиканов, которые были тупо под игнором и шел дальше своим путем.
Так как не считал нужным тратить свое время на то, что и так скоро сдохнет окончательно.

В итоге через годик я оказался прав.

В нашем случае проблема кроется в том, что изначально HTML и CSS не планировались как что-то, что будет конструировать страницу сайта. Разметка и оформление текстов - да, конструктор - нет.

Поэтому, все эти сетки, гриды, флоаты, инлайны, табличные каркасы и
к другим псевдо-сеткам

Это скорее не решение, а хак, призванный решить проблему.
То есть это, как открывать консервную банку кухонным ножом - можно, но открывачкой намного удобнее.

Так вот, Flex - это новый шаг в верстке сайтов. Это инструмент, который создан СПЕЦИАЛЬНО для этого. И посмотрите - еще годик/два и flex вступит в полную силу.

Стоит ли нам его использовать?

Надо тупо сравнить все ЗА:
1. Будущее.
Мы можем сейчас использовать "псевдо-сетку", однако через год
вопрос уже будет другой - Не стоит ли использовать, а как впиздячить flex в maxsite не нарушая гармонию со старьем.
Это я по аналогии с нормализом.

2. Проще и продуманее. Ну здесь я объяснять даже ничего не буду - кто пробовал - поймет. Мы, так сказать, открываем консервную банку открывашкой :)

Против:
1. Теряем сейчас около 10 процентов пользователей. Но потом это число будет быстро стремиться к нулю.

2. Увеличится количество нытиков. Но нам море по колено :D

Короче - я однозначно за flexbox 8-)
http://master-css.com
Майн блогген :)

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

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

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

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


Мы и не делаем бутстрап. Выше я привел алгоритм построения css-файла из 11 пунктов. Это довольно простые и маленькие по объёму стили. Оптимизация картинок на сайте даст больший выигрыш, чем отказ от этих стилей.

Быстрая верстка? Возможно. Но люблю красивый и продуманный код, с хорошей оптимизацией. А не тяп-ляп.


CSS-фреймворк как раз и позволяет использовать качественный продуманный код. Тем более, что пока речь идет о минималистическом фреймворке, который можно мгновенно подстроить под свою задачу. Очевидно, если это какой-то специфичный блок, то верстается он отдельно. Но выполнив 10 пунктов уже получим хоршую базу.

За счет такой "предусмотренности" и HTML и CSS длиннее в несколько раз получаются.


Это довольно спорно. Пусть я пропишу для каждого блока margin и padding в каждом классе каждого блока. Однако если будет один предопределенный класс, который я укажу у html-элементов, то объем будет расти только за счет длины имени класса. Код будет менее объемным.

Использование предопределенных классов — это путь к меньшему результирующему коду.

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

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

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

Немного по flex. В отличии от уже привычных float, эта сетка строится несколько по-другому. Мы привыкли, что каждый элемент нужно как-то позиционировать внутри контейнера. Во flex — это работает автоматом. Нужно лишь задать контейнер.

У этого контейнера указываем поведение ячеек. Три параметра для магии: justify-content, align-items, flex-wrap. Первый указывает как распределять блоки. Если указать justify-content: space-between;, то это распределит все блоки с автоматическими отступами. Не нужны никакие ухищрения с расчетом ширины — всё пустое пространство будет распределено на отступы.

Свойство align-items: stretch; по сути выставит блокам одинаковую высоту.

Третье свойство flex-wrap: wrap; используется для адаптивности. Смысл очень простой: по-умолчанию flex-wrap = nowrap — если места в контейнере не хватает, то переноса блока всё-равно не происходит. Поэтому для некоего @media с точкой, например 768px ставим flex-wrap: wrap;, тем самым разрешая flex-контейнеру делать такой перенос. А классы в переделах своих @media точек делают другие width блоков.

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

   <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>


CSS. Ширина (выборочно):

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

.w25 {
  width: 25%;
}
.w45 {
  width: 45%;
}

@media (max-width: 767px) {
  .w100-medium {
    width: 100%;
  }
  .w60-medium {
    width: 60%;
  }
  .w35-medium {
    width: 35%;
  }
}

@media (max-width: 480px) {
  .w100-small {
    width: 100%;
  }
}



Теперь сам flex (код кроссбраузерный):

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

.grid.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
}
.grid.flex > * {
  border: #888888 1px solid;
  padding: 10px;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .grid.flex {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}


Стили для «.grid.flex > *» — только для красоты.

По flex есть хорошая статья: http://html5.by/blog/flexbox/

ps Обратите внимание на распределение ширины.

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

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

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

Чтож, тогда давайте для построения сеток возьмем flexbox и дело с концом. По браузерам вполне оптимистично. Ишак 11 - поддерживает, 10 - через префиксы. Кому надо поддерживать старых - через любые другие варианты создания макетов это не трудно.

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

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

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

Иконки. Имеется ввиду иконочный шрифт. Нужно ли их включать в базовый комплект — спорный момент. С моей точки зрения — нужно, потому что покажет рядовому пользователю новую возможность. Иконки могут неплохо облагородить текст, да и вообще сайт выглядит «живенько».

Из шрифтов я использую FontAwesome и Grands. Думаю, что есть смысл остановиться только на первом, а второй или любой другой — уже по желению.

Подключение стандартное через @font-face в начале css-файла (так вроде оптимальней для браузера).

Обычно для одиночных иконок используется тэг I — мне нравится этот вариант, он короткий, устоявшийся и Icon. В любом случае иконки задаются через двойной класс .icon и .код_иконки.

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

<i class="icon html5"></i>


Иконка может быть не только в начале блока, но и в конце.

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

<h1 class="text-white ( icon-right css3 )">Заголовок</h1>


Эта возможность потребует добавить ещё один класс .icon-right.

Дальше так: для .icon-right используем :after , а для .icon — :before с соответствующим margin (отступ иконки).

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

.icon:before,
.icon-right:after {
  font-family: FontAwesome;
  display: inline-block;
}
.icon:before {
  margin-right: 7px;
}
.icon-right:after {
  margin-left: 7px;
}


Текст иконки задается уже индивидуально:

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

.icon.css3:before,
.icon-right.css3:after {
  content: "\f13c";
}
.icon.html5:before,
.icon-right.html5:after {
  content: "\f13b";
}


Можно заранее прописать все иконки, но мне кажется, что стоит выбрать какие-то основные (какие? предлагайте варианты!), а остальные уже по желанию. Просто нет смысла загромождать css неиспользуемым кодом (иконок много).

Для удобства, в less можно определить @переменные для символов:

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

@f_awesome_adjust: "\f042";
@f_awesome_adn: "\f170";
@f_awesome_align-center: "\f037";
@f_awesome_align-justify: "\f039";
@f_awesome_align-left: "\f036";
@f_awesome_align-right: "\f038";
@f_awesome_ambulance: "\f0f9";
@f_awesome_anchor: "\f13d";
@f_awesome_android: "\f17b";
...


Дальше:

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

.icon.android:before,
.icon-right.android:after {
  content:@f_awesome_android;
}

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

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

Сообщение MAX » 18 сен 2014, 19:54

Теперь самое интересное. Кидаю «рыбу», в которой объявлены классы, которые по-идее должны присутствовать.

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

// === 00-variables.less ===

// less переменные

@SCREEN_SMALL: ~"max-width: 480px";
@SCREEN_MEDIUM: ~"max-width: 767px";
@SCREEN_LARGE: ~"max-width: 960px";
@SCREEN_XLARGE: ~"min-width: 961px";

// некоторые цвета для текста и фона
// .text-XXX .bg-XXX
@color_XXX: #YYY;

// отступы
// .box-m .box-p
@box_margin: 20px;
@box_margin_small: 5px;
@box_margin_large: 50px;
@box_padding: 20px;
@box_padding_small: 5px;
@box_padding_large: 50px;



// === 02-base.less ===

// загрузить шрифт
@font-face .. FontAwesome

... стили normalize

... установка box-sizing: border-box для *, *:before, *:after

body

... базовые отступ блоков и абзацев

... заголовки H1-6

a

hr
img
blockquote
pre
code

abbr
address
cite
del
dfn
ins
kbd
mark
q
samp
var

table {
   
   &.striped {
   }
   
   &.hover {
   }
}

dl {
   dt {
   }
   
   dd {
   }
}


ul {
   li {
   }
}

ol {
   li {
   }
}


// === 03-css-helpers.less ===

// css-хелперы

.bold
.italic
.underline
.strike
.small-caps
.capitalize
.upper
.lower

ul.nobullet

hr {
   &.dashed
   &.dotted
   &.double
}

img {
   &.rounded
   &.circle
   &.thumbnail
   &.left
   &.right
   &.center
}

// буквица для абзца
.drop-cap


// выравнивание текста
.text-right
.text-left
.text-center
.text-justify

// цвета шрифта
.text-white
.text-red
.text-black
.text-gray
.text-gray-light
.text-gray-dark

// цвета фона
.bg-white
.bg-red
.bg-black
.bg-gray
.bg-gray-light
.bg-gray-dark


// БЛОКИ
.clearfix
.box-right
.box-left
.box-center

// отступы со всех сторон padding + margin
.box-indent
.box-indent-small
.box-indent-large

// margin
.box-m
.box-m-t
.box-m-r
.box-m-b
.box-m-l
.box-m-tb
.box-m-rl
     
.box-m-small
.box-m-t-small
.box-m-r-small
.box-m-b-small
.box-m-l-small
.box-m-tb-small
.box-m-rl-small
     
.box-m-large
.box-m-t-large
.box-m-r-large
.box-m-b-large
.box-m-l-large
.box-m-tb-large
.box-m-rl-large

// padding
.box-p
.box-p-t
.box-p-r
.box-p-b
.box-p-l
.box-p-tb
.box-p-rl

.box-p-small
.box-p-t-small
.box-p-r-small
.box-p-b-small
.box-p-l-small
.box-p-tb-small
.box-p-rl-small

.box-p-large
.box-p-t-large
.box-p-r-large
.box-p-b-large
.box-p-l-large
.box-p-tb-large
.box-p-rl-large

// МОДУЛЬНАЯ СЕТКА
.layout-center
.layout-full
.layout-wrap-center
.layout-wrap-full

// фиксирование блока
.layout-fixed-top
.layout-fixed-right
.layout-fixed-bottom
.layout-fixed-left


// устанавливаем ширину в % от 1 до 100%
.w1
.w2
...
.w100

@media (@SCREEN_SMALL) {
   .w1-small
   .w2-small
}

@media (@SCREEN_MEDIUM) {
   .w1-medium
   .w2-medium
}

@media (@SCREEN_LARGE) {
   .w1-large
   .w2-large
}

@media (@SCREEN_XLARGE) {
   .w1-xlarge
   .w2-xlarge
}



// === 03-flex.less ===

.grid.flex

@media (@SCREEN_MEDIUM) {
  .grid.flex {
  }
}


// === 04-icon.less ===

// переменные для FontAwesome
@f_awesome_XXX: "\YYY";

.icon:before, .icon-right:after
.icon:before
.icon-right:after

.icon.XXX:before, .icon-right.XXX:after // символ иконки



// === 05-layout.less ===

... СТИЛИ ДЛЯ МОДУЛЬНОЙ СЕТКИ индивидуальные для каждого случая ...



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

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

Сообщение Cuprum » 19 сен 2014, 18:43

Пока без живого примера трудно сказать, но вот со всеми этими .box-... ты переборщил, мне кажется.
Сейчас нет времени, на след. неделе покажу кое-что, как можно организовать...

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

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

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

Я не хочу пока браться за реализацию стилей, пока нужно определеиться с именованием. По «box-» мне тоже не очень нравится. Покажи свой вариант.

Аватар пользователя
SWAT
Модератор
Сообщений: 280
Зарегистрирован: 25 июн 2010, 11:52

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

Сообщение SWAT » 22 сен 2014, 07:57

А все эти стили можно будет свободно подключать и отключать в less?
Потому как половину я все равно использовать не буду - ту же ширину от 1 до 100 процентов.

И боксы скорее всего тоже.
http://master-css.com
Майн блогген :)


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

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

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