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风格归类为“非边缘”。

我们被教导像和之类的元素是不好的，因为它们混合了结构和风格，因此我们不应该使用它们。那么处理'边缘css'的正确方法是什么？

Answer 1

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

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

如果你的意思是说“这个”这个词是一个强调的词 - 也就是说，如果你要阅读这个句子，你会在发音时改变你的语调 - 那么你应该这么说类名class="emphasised"。但是，您不需要这样做，因为HTML中已有一个具有该含义的元素，特别是。

<em>This</em> man?

幸运的是，浏览器默认会将渲染为斜体，因此您不再需要CSS。

你不应该总是使用来表示斜体。一个词可能是斜体的其他原因。例如，它可能是一个引用（使用<cite>），或者是另一种语言的短语（使用c'est la vie），或者它可能只是一个没有语义含义的印刷怪癖（在这种情况下是一个普通的{ {1}}样式很好）。使用与您想要说的语义最匹配的元素，如果默认渲染与您想要的不匹配，请使用CSS调整渲染。

默认情况下，第二种形式的重点会以粗体显示，：

<strong>

这通常被认为是“比What are you thinking?更强调”。如果这是你想要的，那就使用那个标签。但同样，不要因为想要大胆的东西而跳过。如果它应该是粗体，因为它是标题，请使用标题标记。如果它应该是粗体，因为它是文章的第一行或其他内容，请添加（或在适当的情况下简单地使用CSS class="first-line"选择器。）

Answer 2

而不是和使用和。它们具有语义含义，并且通常由浏览器默认设置为与和相同，当然您可以像控制任何其他元素一样控制它们的样式。

Answer 3

我当然会避免在CSS样式表中创建Bold和Italic类。

当你说'边缘'时，如果你的意思是它就像一个一次性的情况，你不觉得你应该为这一个案例创建一个类，那么只使用内联CSS怎么样？

... e.g

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

Answer 4

为什么不创建一个描述意图的css类而不是强调的动作。你可以称之为“importantWord”，是的，它只包含一个规则。重要的是，如果你决定改变风格的外观，从语义上讲，它仍然有意义。

Answer 5

我认为你是用它写的。您也可以使用它来呈现默认粗体，但它会有另一种含义，因为它可以精确确定文本在其中的重要性。

对于单属性css规则没有更好的方法。

边缘CSS属性

5 个答案: