边际 CSS 属性
你们如何处理边缘CSS?我所说的边际是指需要斜体或粗体的单个单词或短语。 来声明“粗体”类似乎也很愚蠢
Bold { font-weight: bold; }
仅使用Or 斜体
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”的正确方法是什么?
How do you guys handle marginal CSS? By marginal, I mean a single word or phrase that needs italics or bolding. It seems silly to declare a 'bold' class with just
Bold { font-weight: bold; }
Or italics, either!
Italic { font-style: italics; }
But I find myself hesitating to put class like that into my css reset.
<p>
<span class="Italic">This</span> man?
<span class="Bold">What</span> are you thinking?
</p>
Obviously if you're going to combine a bunch of properties to make something look different, it makes sense...
.HoverOnMe
{
color: #880;
text-decoration: underline;
font-style: italic;
}
But I'd classify the above css style as 'non-marginal'.
We're taught that elements like <b>
and <i>
are bad because they mix structure and style, and therefore we shouldn't use them. So what is the right way to handle 'marginal css'?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
使用
和
代替
和
。这些具有语义含义,并且通常被浏览器默认样式设置为与
和
相同,当然您可以控制它们的样式,例如任何其他元素。
Instead of
<b>
and<i>
use<strong>
and<em>
. These have semantic meaning and are often default-styled by browsers to be the same as<b>
and<i>
, and of course you can control their style like any other element.我当然会避免在 CSS 样式表中创建 Bold 和 Italic 类。
当你说“Marginal”时,如果你的意思是它就像是一次性的情况,并且你不觉得应该只为这种情况创建一个类,那么只使用内联 CSS 怎么样?
例如..
I certainly would avoid creating Bold and Italic classes in your CSS stylesheet.
When you say 'Marginal', if you mean that it is like a one-off case and you dont feel you should create a class just for this one case, then what about just using inline CSS?
e.g...
为什么不创建一个 css 类来描述意图而不是强调的动作。您可以将其称为“importantWord”之类的名称,是的,它只包含一条规则也很好。重要的是,如果您决定更改样式的外观,从语义上讲,它仍然有意义。
Why not create a css class that describes the intent rather than the action of emphasizing. You could call it something like "importantWord", and yes, it's fine that it only contains a single rule. The important thing is that if you decide to change the appearance of the style, semantically, it will still make sense.
我认为你是用 .您可以使用too来呈现默认粗体,但它会有另一种含义,因为它精确地表明了其中文本的重要性。
对于单属性 CSS 规则来说,没有更好的方法了。
I think you did it write using . You could use too to render default bold but it would have another meaning since it precise the importance of the text within it.
There's no better way for a one-attribute css rule.
当您向元素添加类时,请根据该类所代表的内容来命名该类,而不是根据其外观来命名。
class="Italic"
是一种反模式,它完全忽略了分离内容和样式的要点。如果你的意思是“This”这个词是一个强调词——也就是说,如果你要读这个句子,你在发音时会改变你的语气——那么你应该用类名来表达就像
class="emphasisized"
。但是您不需要这样做,因为 HTML 中已经有一个具有完全相同含义的元素,特别是。
幸运的是,浏览器默认将
渲染为斜体,因此您不再需要任何 CSS。
您不应该总是使用
表示斜体。单词使用斜体还有其他原因。例如,它可能是引文(使用
),或另一种语言的短语(使用
c'est la vie
),或者它可能只是一个没有语义意义的印刷怪癖(在这种情况下,带有样式的普通就可以了)。使用与您想要表达的语义最匹配的元素,如果默认渲染与您想要的外观不匹配,则使用 CSS 调整渲染。
还有第二种强调形式,默认呈现为粗体,
:
这通常被认为意味着“比
更强调”。如果这就是您想要的,请使用该标签。但再次强调,不要仅仅因为您想要大胆的东西就跳到
。如果因为它是标题而应该加粗,请使用标题标签。如果它应该是粗体,因为它是文章的第一行或其他内容,请添加一个
class="first-line"
(或者简单地使用 CSS:first-line
选择器,在适当的情况下)。When you add a class to an element, name that class by what it represents, not what it looks like.
class="Italic"
is an anti-pattern that completely misses the point of separating content and styling.If what you mean to say is that the word “This” is an emphasised word—that is, if you were to read the sentence, you'd change your tone of voice when pronouncing it—then you should say so with a class name like
class="emphasised"
. However you don't need to do that, because there is already an element available in HTML that has exactly that meaning, specifically<em>
.As luck would have it, browsers will render
<em>
as italic by default, so you wouldn't need any more CSS.You shouldn't always use
<em>
for italics. There are other reasons a word might be italicised. For example it might be a citation (use<cite>
), or a phrase in another language (use<span lang="fr">c'est la vie</span>
), or it might just be a typographical quirk with no semantic meaning (in which case a plain<span>
with styling is fine). Use the element that most closely matches the semantics of what you are trying to say, and adjust the rendering with CSS if the default rendering doesn't match what you wanted it to look like.There is a second form of emphasis that is rendered as bold by default,
<strong>
:This is usually considered to mean “more emphasised than
<em>
”. If that is what you were going for, use that tag. But again, don't jump for<strong>
just because you want something bold. If it should be bold because it's a heading, use the heading tags. If it should be bold because it's the first line of an article or something, add aclass="first-line"
(or simply use a CSS:first-line
selector, where appropriate).