Как лучше реализовать?

[Багдыч]

Всем доброго дня.

Проблема такова: на сайте, в статьях, я использовал конструкции такого типа:

<div style="padding-top:10px;padding-bottom:5px;"></div>

— ну это же бред, понятно. 

 

Конечно, я должен был прописать это стилях, но увы, мне в одном случае нужен отступ в 5 пикселей, а в другом — в 10, 15. 

 

 

Как лучше реализовать это? Чтобы код не выглядел так убого.

Спасибо.

[wendigo]

Претендуя на роль Кэпа, все же напишу. В css-файле создаете классы, где 5 пикселей, где 10 и где 15. Других вариантов нет.

[vera17]

можно с помощью псевдоклассов, если есть логическое чередование http://htmlbook.ru/css/nth-child или http://htmlbook.ru/css/nth-of-type

Edited February 16, 2014 by vera17

[Багдыч]

Какой вариант будет лучше?

<div class="padding-top-10 padding-bottom-5"></div>

или

<div class="p-t-10 p-b-5"></div>

??? 

 

В предыдущей теме меня убеждали, что, если я буду использовать 2 вариант — сам запутаюсь в своем коде и, что название стиля должно быть информативным. Так ли это?

[bgdn]

Боюсь вы уже запутались. Если хотите использовать встроенный стиль - используете атрибут style в теге. Если же выбираете как назвать класс - то оба варианта которые вы описали выше слишком запутанные.

[Багдыч]

Боюсь вы уже запутались. Если хотите использовать встроенный стиль - используете атрибут style в теге. Если же выбираете как назвать класс - то оба варианта которые вы описали выше слишком запутанные.

 

Как в первом сообщении? 

[Xenia Wanger]

Какой вариант будет лучше?

<div class="padding-top-10 padding-bottom-5"></div>

или

<div class="p-t-10 p-b-5"></div>

 

А можно потрясающий вопрос? Зачем вы называете классы по названию свойств? Нельзя задать абстрактное название? По содержимому, находящемуся в блоке, на худой конец?

<div class="p-t-10 p-b-5"></div>

А вот что значит вот такая конструкция, вы через пару месяцев вообще не вспомните. И если с вашим кодом будет впоследствии работать другие люди... В общем не советую так делать

 

У вас есть два варианта, либо создать два разных класса, для двух блоков. И в одном прописать padding-bottom: 5px, а в другом padding-bottom: 15px (ну и для верхнего отступа и в том и другом случае указать 10px). Либо же использовать уже знакомую вам конструкцию - class="класс1 класс2", где в первом классе описать значение для одного блока, а во втором написать то, чем отличается второй блок от первого.

 

[Багдыч]

Xenia Wanger, в первом сообщении я написал, что мне в одном случае нужен отступ в 5 пикселей, в других 10, 15, 20.

 

 

А можно потрясающий вопрос? Зачем вы называете классы по названию свойств? Нельзя задать абстрактное название? По содержимому, находящемуся в блоке, на худой конец?

 

Данные стили я применяю не только к одному единственному блоку, а сразу к 3-4, а то и больше. Все они имеют разные предназначения. 

 

Как мне быть? Вот кусок подобного кода:

<div class="padding-top-10 padding-bottom-5"><span class="bold-font">Разрешение:</span></div><div class="padding-bottom-10">16x</div><div class="padding-top-10 padding-bottom-5"><span class="bold-font">Версия:</span></div><div class="padding-bottom-10">1.7.4</div><div class="padding-top-10 padding-bottom-5"><span class="bold-font">Описание:</span></div><div class="padding-bottom-10">...</div>

Здесь идентичные отступы, но в некоторых случаях они разные.

[bgdn]

Я конечно еще новичек в css, но то что вы написали выше - полная ерунда. В значении атрибута class не должно быть таким длинным и уж тем более со значениями из стиля. Такое ощущение что вы перепутали атрибут class с атрибутом style. Но даже если так, то значения всё равно не будут работать.

 

http://htmlbook.ru/samcss

[Багдыч]

Я конечно еще новичек в css, но то что вы написали выше - полная ерунда. В значении атрибута class не должно быть таким длинным и уж тем более со значениями из стиля. Такое ощущение что вы перепутали атрибут class с атрибутом style. Но даже если так, то значения всё равно не будут работать.

 

http://htmlbook.ru/samcss

Я тоже новичок и ничего не перепутал, а стили работают.

[Xenia Wanger]

Xenia Wanger, в первом сообщении я написал, что мне в одном случае нужен отступ в 5 пикселей, в других 10, 15, 20.

 

 

А можно потрясающий вопрос? Зачем вы называете классы по названию свойств? Нельзя задать абстрактное название? По содержимому, находящемуся в блоке, на худой конец?

 

Данные стили я применяю не только к одному единственному блоку, а сразу к 3-4, а то и больше. Все они имеют разные предназначения. 

 

Как мне быть? Вот кусок подобного кода:

<div class="padding-top-10 padding-bottom-5"><span class="bold-font">Разрешение:</span></div><div class="padding-bottom-10">16x</div><div class="padding-top-10 padding-bottom-5"><span class="bold-font">Версия:</span></div><div class="padding-bottom-10">1.7.4</div><div class="padding-top-10 padding-bottom-5"><span class="bold-font">Описание:</span></div><div class="padding-bottom-10">...</div>

Здесь идентичные отступы, но в некоторых случаях они разные.

 

Я бы на вашем месте по чуть-чуть начала исправлять, в зависимости от тех советов, которые вам дают. Нельзя так делать - class="padding-top-10 padding-bottom-5". Зачем вы называете так классы? Какая логика вами движет?

И перечитайте внимательнее мое сообщение. Там все подробно написано как правильнее сделать. В чем возникла проблема? Или вы хотите, чтобы за вас здесь элементарный кусок кода написали?

[Багдыч]

И перечитайте внимательнее мое сообщение. Там все подробно написано как правильнее сделать. В чем возникла проблема? Или вы хотите, чтобы за вас здесь элементарный кусок кода написали?

 

 

Я, скорее, не очень понимаю, как по-другому назвать эти 2 стиля.

 

Либо же использовать уже знакомую вам конструкцию - class="класс1 класс2", где в первом классе описать значение для одного блока, а во втором написать то, чем отличается второй блок от первого.

 

 

 

Как бы вы их назвали?

Edited February 24, 2014 by Багдыч

[wwt]

Я, скорее, не очень понимаю, как по-другому назвать эти 2 стиля.

 

<div class="padding-top-10 padding-bottom-5"><span class="bold-font">Разрешение:</span></div><div class="padding-bottom-10">16x</div><div class="padding-top-10 padding-bottom-5"><span class="bold-font">Версия:</span></div><div class="padding-bottom-10">1.7.4</div><div class="padding-top-10 padding-bottom-5"><span class="bold-font">Описание:</span></div><div class="padding-bottom-10">...</div>

Из данного кода видно что есть заголовки и есть значения. Ну так и называйте:

.block-header {   padding: 10px 0 5px;}.block-value {   padding-bottom: 10px;}

если нужны разные варианты можно типо как-то так:

.block-header.large {   padding: 20px 0 10px;}.block-value.large {   padding-bottom: 20px;}.block-header.mini {   padding: 5px 0 2px;}.block-value.mini {   padding-bottom: 5px;}

<div class="block-header"><span class="bold-font">Разрешение:</span></div><div class="block-value">16x</div><div class="block-header large"><span class="bold-font">Версия:</span></div><div class="block-value large">1.7.4</div><div class="block-header mini"><span class="bold-font">Описание:</span></div><div class="block-value mini">...</div>

[Great Rash]

Если у вас в одном месте 5, в другом месте 10, а в третьем 15, то вам нужно срочно сообщить дизайнеру, что он нифига не понимает в веб-дизайне. Если такой возможности нет. то насоздавайте разумное количество классов-модификаторов с разными отступами - это будет лучшим выходом.

[Багдыч]

Если у вас в одном месте 5, в другом месте 10, а в третьем 15, то вам нужно срочно сообщить дизайнеру, что он нифига не понимает в веб-дизайне. Если такой возможности нет. то насоздавайте разумное количество классов-модификаторов с разными отступами - это будет лучшим выходом.

Все эти отступы исключительно для контента сайта. Поэтому в некоторых случаях больше, в некоторых меньше.

 

А где можно прочитать об этих классах? Прогуглил — ничего не нашел.

[Great Rash]

Все эти отступы исключительно для контента сайта. Поэтому в некоторых случаях больше, в некоторых меньше.

Это неправильно. Почитайте что такое "вертикальный ритм". 

[Багдыч]

 

Все эти отступы исключительно для контента сайта. Поэтому в некоторых случаях больше, в некоторых меньше.

Это неправильно. Почитайте что такое "вертикальный ритм". 

 

С этим, как раз-таки, все нормально. 

 

Так что там с классами-модификаторами?

[Great Rash]

А про них уже выше всё написали. Прям самый первый ответ.

 

Типа так:

<div class="block">  <!-- блок без отступов --></div><div class="block p-5">  <!-- блок c padding: 5px; --></div><div class="block m-10">  <!-- блок c margin: 10px; --></div><div class="block m-10-20-30">  <!-- блок c margin: 10px 20px 30px; --></div>

[Багдыч]

Я создал их, как, на тот момент, понимал. Сообщение 4. И оказалось, что неправильно.

[Great Rash]

Фигня, всё что вам написали не подходит для вашего случая. Я же правильно понимаю, что вам надо отступами у текста управлять, вот для такого случая вы всё сделали правильно. Если же у вас в вёрстве много однотипных блоков, то конечно логично объединить их в группу и назвать стиль не p-t-5, а по смыслу.

[Багдыч]

Фигня, всё что вам написали не подходит для вашего случая. Я же правильно понимаю, что вам надо отступами у текста управлять, вот для такого случая вы всё сделали правильно. Если же у вас в вёрстве много однотипных блоков, то конечно логично объединить их в группу и назвать стиль не p-t-5, а по смыслу.

Все именно так.

Edited February 24, 2014 by Багдыч

[Багдыч]

Закройте пожалуйста тему. Создам новую, не относящуюся к этой.

Edited February 24, 2014 by Багдыч