重复标题选择器
随着最近推出 http://csslint.net,我对在过去的。以下方法是我最近使用的一种方法:
/* Fonts */
h1 { font-size:20px }
p { font-size:12px }
/* Colors */
h1 { color:green }
p { color:grey;
background-color:white }
/* Margins */
h1 { margin:0 }
p { margin:0 0 5px }
根据 linter,问题是我一遍又一遍地重新声明标题选择器。当然,原因是要保持规则类型之间的逻辑分离。如果我想改变颜色,我会访问颜色区域。如果我想改变维度,我会访问维度区域。
CSSLint 是否担心我可能面临覆盖样式的危险,从而浪费字符,或者是否存在与有多少块有助于标题元素的整体呈现相关的性能问题?
这是一种不好的做法,还是仅仅是一种误报?
With the recent launch of http://csslint.net, I'm questioning some ways I've constructed my stylesheets in the past. The following method is one that I've used recently:
/* Fonts */
h1 { font-size:20px }
p { font-size:12px }
/* Colors */
h1 { color:green }
p { color:grey;
background-color:white }
/* Margins */
h1 { margin:0 }
p { margin:0 0 5px }
The problem, according to the linter, is that I'm re-declaring heading selectors over and over again. The reason of course is to keep logical separation between types of rules. If I wish to change colors, I would visit the colors region. If I wish to change dimensions, I would visit the dimensional areas.
Is CSSLint worried that I may be in danger of overwriting styles, thus wasting chars, or are there performance issue related to how many blocks contribute to the overall presentation of heading elements?
Is this a bad practice, or merely a false-alarm?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
无论哪种方式,都会为所有
h1
和所有p
计算样式。与实际计算和渲染样式的同样可以忽略不计的性能“影响”相比,选择器匹配的开销很小。我猜你认为 CSS Lint 担心的就是这种情况。事实上,我有点喜欢你自己组织样式的方式,除了意外覆盖声明之外没有看到任何其他问题。
Styles get computed for all
h1
s and allp
s either way. The overhead of selector matching is little compared to the equally-negligible performance "impact" of actually computing and rendering the styles.I'm guessing what you think CSS Lint is worried about is the case. In fact, I kinda like how you organize your styles myself, and don't see any other problems than overwriting declarations by accident.
从他们的文档中 -
我认为这更多地与可用性/一致性而不是性能有关。一页上的标题大小为 20 像素,另一页上的标题大小为 14 像素,看起来很不专业。
From their documentation -
I think it is more to do with usability/consistency rather than performance. A heading of size 20px on one page and 14px on another just looks unprofessional.