边缘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?

如果你的意思是说的是,"这"是一个强调字,也就是说,如果你读这句话,你会宣判的时候改变你的语气它,那么你应该有一个类名这么说喜欢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"(或者只是:first-line在适当的时候使用CSS 选择器).