Является ли margin/padding приемлемым как встроенный CSS?

Лучше всего иметь весь стиль во внешнем файле CSS, чтобы использовать кеширование, разделение разметки и дизайна, лучший обзор и т.д.

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

Я подумал о трех вариантах:

Вариант 1. Разделите стили внешнего вида из стилей позиции (margin/padding), используйте их в отдельных классах и объедините их по мере необходимости.

.myClass { ...; }
.myClass.top { margin-top: 20px; }
.myClass.inside { margin: 10px 0px; }
.myClass.bottom { margin-bottom: 20px; }

Вариант 2. Дублируйте классы, переименуйте их соответственно и сохраните все различия в своем классе.

.myClassTop { ...; margin-top: 20px; }
.myClass { ...; margin: 10px 0px; }
.myClassBottom { ...; margin-bottom: 20px; }

Вариант 3. Используйте встроенный стиль для объявления разных полей/дополнений.

<div class="myClass" style="margin-top: 20px;">
<div class="myClass">
<div class="myClass" style="margin-bottom: 20px;">

имеющий

.myClass { ...; margin: 10px 0px; }

Мой здравый смысл подсказывает мне использовать варианты 1 и каскадные различия в зависимости от структуры parent/child. Но это обычно заканчивается довольно запутанным, особенно для других разработчиков, читающих CSS. Поэтому я попробовал вариант 3 (имея только несколько внешних полей/дополнений), и это, похоже, работает очень хорошо.

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

Любые советы?

Ответы

Ответ 1

Мое личное предпочтение состоит в том, чтобы, так сказать, иметь "разделительные классы". Например:

.default-row-spacer{
    margin-bottom:10px;
}
.default-spacer{
    margin-right:10px;
}
.large-row-spacer{
    margin-bottom:20px;
}

Затем я использую их следующим образом:

<div class="panel default-spacer default-row-spacer">
    <div class="content default-row-spacer">
    </div>
    <div class="content default-row-spacer">
    </div>
</div>
<div class="right-panel default-row-spacer">
</div>

Это позволяет мне позже изменить все на полях сайта, поддерживая тот же внешний вид на моем веб-сайте.

Ответ 2

это сильно зависит от ваших проблем,

когда вам нужно делать это очень часто, и значения не слишком разные или вы можете закрыть это до "10 лучших полей", может быть полезно сделать дополнительные классы, такие как

.tTwenty { margin-top:20px;}
.bTwenty {margin-bottom:20px;}

и добавьте их как

<div class="myClass tTwenty">
<div class="myClass">
<div class="myClass bTwenty">

но все ваши решения будут работать, это просто разница в том, чтобы позаботиться об этом но вы не должны начинать использовать встроенные стили, потому что вы укладываетесь с ними, и вы начинаете исправлять каждый маленький материал с помощью inline-css, а затем он становится волосатым, потому что, когда вы смотрите на это через год, вы должны смешивать extern css и ваши встроенные строки, чтобы понять стиль, и вам нужно прикоснуться к каждому отдельному документу с помощью встроенного стиля, а не исправлять все в ваших css файлах

Ответ 3

Эмпирическое правило: если это нужно сделать репрессивно... как список что-то сказать комментарии. И каждый из них имеет тело, которое появляется, 40px под заголовком, использует классы css. Если это одно время. просто один объект, скажем... использовать inline

Ответ 4

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

В результате я использовал элемент Chrome Inspect Element, чтобы точно узнать иерархию div и классов и сделал следующее:

Вариант 4:

.myClass { ...; }
.thumbnail .myClass { margin-top: 20px; }
div.leftCol .myClass { margin: 10px 0px; }
footer .myClass { margin-bottom: 20px; }

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