html - 边缘 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>不好，因为它们混合了结构和样式，因此我们不应该使用它们。那么处理“边际 css”的正确方法是什么？

Answer 1

当您将一个类添加到一个元素时，请根据该类代表的内容而不是它的外观来命名该类。 class="Italic"是一种完全忽略了分离内容和样式的要点的反模式。

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

如果你的意思是“This”这个词是一个强调的词——也就是说，如果你要读这个句子，你会在发音时改变你的语调——那么你应该这样说类名，如 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 选择器)。