Предельные атрибуты CSS

Question

Как вы, ребята, справляетесь с маргинальным CSS?Под маргиналом я подразумеваю одно слово или фразу, которая нуждается в курсиве или жирном шрифте.Кажется глупым объявить «жирный» класс с

Bold { font-weight: bold; }

Или курсивом, либо!

Italic { font-style: italics; }

Но я не решаюсь добавить такой класс в мой сброс CSS.

<p>
    <span class="Italic">This</span> man? 
    <span class="Bold">What</span> are you thinking?
</p>

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

.HoverOnMe
{
    color: #880;
    text-decoration: underline;
    font-style: italic;
}

Но я бы классифицировал вышеупомянутый cssстиль как «не маргинальный».

Нас учат, что такие элементы, как <b> и <i>, плохи, потому что они смешивают структуру и стиль, и поэтому мы не должны их использовать.Итак, как правильно обращаться с 'marginal css'?

Answer 1

Когда вы добавляете класс к элементу, назовите этот класс по тому, что он представляет, а не по тому, как он выглядит. class="Italic" - это анти-шаблон, который полностью пропускает точку разделения содержимого и стиля.

<span class="Italic">This</span> man? 
<span class="Bold">What</span> are you thinking?

Если то, что вы хотите сказать, это то, что слово «Это» является выделенным словом, то есть, если бы вы прочитали предложение, вы бы изменили свой тон голоса при произнесении этого слова, тогда вы должны сказать это с имя класса вроде class="emphasised". Однако вам не нужно этого делать, потому что в HTML уже есть элемент, который имеет именно это значение, а именно <em>.

<em>This</em> man?

Как повезет, браузеры по умолчанию отобразят <em> курсивом, поэтому вам больше не понадобится CSS.

Вы не должны всегда использовать <em> для курсива. Есть и другие причины, по которым слово может быть выделено курсивом. Например, это может быть цитата (используйте <cite>), или фраза на другом языке (используйте <span lang="fr">c'est la vie</span>), или это может быть просто типографская причуда без семантического значения (в этом случае простой <span> со стилем Это хорошо). Используйте элемент, который наиболее точно соответствует семантике того, что вы пытаетесь сказать, и настройте рендеринг с помощью CSS, если рендеринг по умолчанию не соответствует тому, как вы хотели, чтобы он выглядел.

Существует вторая форма выделения, которая по умолчанию отображается жирным шрифтом, <strong>:

<strong>What</strong> are you thinking?

Обычно считается, что это означает «более подчеркнуто, чем <em>». Если это то, что вы хотели, используйте этот тег. Но опять же, не прыгайте на <strong> только потому, что вы хотите что-то смелое. Если он должен быть жирным, потому что это заголовок, используйте теги заголовка. Если он должен быть выделен жирным шрифтом, потому что это первая строка статьи или чего-то такого, добавьте class="first-line" (или просто используйте селектор CSS :first-line, где это уместно).

Answer 2

Вместо <b> и <i> используйте <strong> и <em>. Они имеют семантическое значение и часто используются браузерами в качестве стиля по умолчанию, совпадающего с <b> и <i>, и, конечно, вы можете контролировать их стиль, как и любой другой элемент.

Answer 3

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

Answer 4

Я думаю, вы сделали это, используя.Вы также можете использовать его для рендеринга жирным шрифтом по умолчанию, но это будет иметь другое значение, поскольку оно уточняет важность текста внутри него.

Нет лучшего способа для правила css с одним атрибутом.

Answer 5

Я бы, конечно, не стал создавать классы Bold и Italic в вашей таблице стилей CSS.

Когда вы говорите «Marginal», если вы имеете в виду, что это похоже на одноразовый случай, и вы не чувствуете, что должны создавать класс только для этого одного случая, то как насчет использования встроенного CSS?

... * например 1005 *

<p>
    <span style="font-style:italic">This</span> man? 
    <span style="font-weight:bold">What</span> are you thinking?
</p>