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

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

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

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

Сообщение SWAT » 22 сен 2014, 08:00

Еще момент, что бы прописать отступы в боксах - есть переменные.
Может сделать так же и с шириной. Вместо 100 стилей использовать 3 - 5 и сделать так, что бы их можно было задавать в переменных, а уже потом использовать на сайте.
http://master-css.com
Майн блогген :)

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

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

Сообщение MAX » 22 сен 2014, 10:36

А все эти стили можно будет свободно подключать и отключать в less?


Речь пока идет только об именовании. Какие из предложенных вариантов включать в шаблон, решает вебмастер сам. Также я думаю, что и рализация может быть самостоятельной. Там всё просто.


Может сделать так же и с шириной. Вместо 100 стилей использовать 3 - 5 и сделать так, что бы их можно было задавать в переменных, а уже потом использовать на сайте.


Выигрыш мизерный. Ширину можно определять и не в процентах (не обязательно все 100, а с шагом 5%), а в виде колонок: w1-2, w5-12 и т.д. Только в этом варианте придется расчитать отступы колонок.

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

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

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

Я вот подумал, а зачем нам вообще все эти box-...? Они где-то участвуют? Если сетка построена с помощью flex, где им место? Если это просто какие-то блоки внутри которых можно что-то разместить, то опять мимо кассы, в том смысле, что жесткое указание (пусть и в 3 вариантах) margin и padding ни к чему.

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

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

Сообщение MAX » 22 сен 2014, 21:25

«box-» — универсальные классы. Они могут применяться к любому блоку, например заголовки.

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

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

Сообщение MAX » 22 сен 2014, 21:31

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

<div class="layout-center"><div class="box-indent">

   <h1 class="box-p-tb-large text-center">Flex</h1>

   <div class="grid flex bordered">
     <div class="w45 w100-medium w100-small box-p-large"><?= mso_lorem(100, 'red') ?></div>
     <div class="w25 w35-medium w100-small box-p-small"><?= mso_lorem(50, 'green') ?></div>
     <div class="w25 w60-medium w100-small box-p-small"><?= mso_lorem(100, 'blue') ?></div>
   </div>
   
</div></div>


Изображение

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

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

Сообщение Cuprum » 23 сен 2014, 00:54

Т.е. box-... в таком случае просто выставляет нужные margin-padding? Хм, не проще ли тогда дать заголовку дать осмысленный класс и записать значения там:
<h1 class="main-title text-center">Flex</h1>
.main-title {
margin: ...;
padding:...:
}
Т. е. я пока не очень понимаю, как .box может облегчить наше существование ;)
С шириной понятно - там обычно используется кратность (w100, w50, w20 и тд) и таких значений хоть и прилично, но их можно пересчитать. Даже утилитарные .fl, .fr, .fn допускаю - тут фактически 3 значения. Но margin и padding может быть любым (в зависимости от задачи). Может тут тоже использовать кратность? Думаю это лучше, чем small-large. Правда, это все равно пока вакуумный конь - будет ли такой подход помогать при создании сайта, трудно сказать...

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

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

Сообщение MAX » 23 сен 2014, 10:41

Хм, не проще ли тогда дать заголовку дать осмысленный класс и записать значения там:


Не проще. Что такое main-title? Из этого именования мы не можем понять его назначение. А если у меня 10 заголовков на странице? Каждому свой класс? Задача отбить заголовок от других блоков достаточно частая. Чтобы например отделить подзаголовок нужно как-то извратиться, потому что как перед, так и после него могут быть другие блоки/тэги.

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

h1
h2
p
h2
p
h2
h3
p
h2


Во всех этих случаях разные отступы между блоками. Padding и margin нужно как-то разделять, потому что это разные отступы.

«box-» показывает, что класс принадлежит к какому-то блоковому элементу (не строчному в терминах html). Просто использовать «b-»? Экономия мизерная.

Но margin и padding может быть любым (в зависимости от задачи). Может тут тоже использовать кратность? Думаю это лучше, чем small-large.


Может. Но в типовых задачах в пределах шаблона/сайта три значения вполне оптимальны. Числовые значения задаются в каждом сайте отдельно.

Особенно удобны все эти классы при прототипировании.

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

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

Сообщение SWAT » 23 сен 2014, 11:32

Просто использовать «b-»? Экономия мизерная.


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

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

С миру по нитке, и ужмем стили хорошенько. Да и в итоге получится грамотный код.
http://master-css.com
Майн блогген :)

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

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

Сообщение MAX » 23 сен 2014, 11:48

box-p-tb-large — это понятно, что какой-то блок с чем-то большим. А b-p-tb-large — полностью теряется семантика.

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

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

Сообщение SWAT » 23 сен 2014, 12:18

А b-p-tb-large — полностью теряется семантика.

Ты про то что b - может ассоциироваться с bottom?

Для бокс да. Да и сокращать 2 символа пожалуй - лишнее.
Просто ты везде стремишься все оптимизировать (это хорошо).

А вообще, если брать твои сокращения p, m, tb, lr - это нам понятно, что значит эти буковки, потому как мы наблюдаем процесс с самого начала.

Однако с чего ты взял что поймут другие?

Я к тому, что все равно надо будет сделать подробный мануал по этому поводу. И вообще MaxSite дико страдает из-за отсутствия мануалов для новичков.

В общем мое предложение сейчас такое:

Пока не забивать голову сокращениями. А писать все стили по полной, не сокращая ни одной буковки. А потом, когда картина уже будет приблизительно составлена полностью и видна целиком, подумать как сэкономить в размере.

И вот когда мы продумаем полностю все сокращения, тогда можно будет сделать мануал по стилям. Эту работу я готов взять на себя. Работать с новичками у меня хорошо получается. ;)
http://master-css.com
Майн блогген :)


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

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

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

cron