CSS 框架和 “语义命名”
我研究了两个可以节省我大量时间的 CSS 框架（Blueprint、960gs），但对如何使用它们并遵守 Web 标准有疑问。 例如，Blueprint 具有以下内容：
和 960gs，例如：
这并不困扰我个人，但我看到有人提到不建议对类使用这些非标准名称，并且违反了网络标准。 作为一名后端开发人员，我不太了解最新的 Web 标准、可访问性等，但我希望至少保持一定程度的合规性。 简单地添加有意义的 id 就可以了吗？ 例如：
注意：我也喜欢 nicholaides 使用 Compass/Sass 的建议！
I've looked at two CSS frameworks that could save me a lot of time (Blueprint, 960gs) but have questions on how to use them and comply with web standards. For example, Blueprint has things like:
<div class="span-24 last">
and 960gs like: <div class="grid_6 prefix_3 suffix_3">
This doesn't personally bother me, but I've seen mention that using these non-standard names for classes is not advised and goes against web standards. As more of a back-end developer, I'm not up on the latest Web Standards, accessibility, etc., but I'd like to at least stay somewhat compliant. Would simply adding meaningful ids work? Like: <div class="grid_12" id="menu"> Is there a best practice when using CSS frameworks like these?
Note: I also like nicholaides's suggestion of using Compass/Sass!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我认为您将风格论证与标准论证混淆了。 有人认为，在创建类时，您应该将其称为“标题”而不是“蓝色” - 仅仅是因为如果标题需要变为绿色，则必须更改类定义和 HTML，而不仅仅是重新定义“标题” ' 班级。 这是个人喜好，风格不错，但与任何标准无关。
类没有“标准”名称，您可以随意命名它们，因此我不会担心从技术标准的角度以任何特定方式命名类。
此外，由于 CSS 框架创建的类不适合由人类编辑，而仅在框架的上下文中使用，因此它们缺乏语义意义与框架之外无关。
I think you're confusing a style argument with a standards argument. There are people who argue that when creating a class you should call it 'headline' and not 'blue' - simply because if the headline needs to become green, you have to change the class definition AND the HTML rather than just redefining the 'headline' class. That's a personal preference, it's good style, but not related to any standards.
There are no 'standard' names for classes, you can call them anything you want, so I wouldn't worry about naming classes any particular way from a technical standards perspective.
Additionally, since the classes that a CSS Framework create aren't meant to be edited by humans, but only used in the context of the framework, their lack of semantic meaning is irrelevant outside the framework.
我不明白如何实现
并且
不符合网络标准。 这只是分配给单个元素的多个类。
I don't see how
and
fails to comply with web standards. This is simply multiple classes assigned to a single element.
从长远来看，你节省下来的时间将会被浪费掉。 您可能会发现自己总是在 css 和 html 之间切换，试图记住“grid_6”是什么。 描述性的类名会有很大帮助。
In the long run, your saved time will be lost. You may find yourself forever flipping between your css and your html, trying to remember what "grid_6" is. Descriptive class names will help a lot.
查看指南针。
它使用 Sass （编译为 CSS）并使用许多流行 CSS 框架的功能。 （这并不像听起来那么可怕/奇怪。即使没有 CSS 框架支持，Sass 也是 CSS 的一个很好的替代品。）
而不是做
You do:
编译为
You 可以利用 CSS 框架，同时保持标记的干净和语义。
Check out Compass.
It uses Sass (which compiles to CSS) and that uses features from a number of popular CSS frameworks. (It's not as scary/bizarre as it sounds. Sass is a great replacement for CSS even without the CSS framework support.)
Instead of doing
You do:
which compiles to
You can take advantage of CSS frameworks while keeping your markup clean and semantic.
不要使用 CSS 框架
因为您的网站不会使用该框架提供的所有内容。
拿它作为参考并编写自己的 CSS 就好了。
它会更容易维护，并且你的css文件会更小。
我唯一会使用的部分是..来自 960.gs 的 Reset.css 文件
重置 css 文件广泛用于删除 DOM 元素的所有默认白色间距。
Don't use CSS Framework
because your website will not use everything the framework offers.
It is just good to take it as a reference and write your own CSS.
It will be easier to maintain, and your css file will be smaller.
Only part I would use is..the reset.css file from 960.gs
The reset css file is widely used to remove all the default white spacing with DOM elements.
您可以尝试使用即将推出的 html5 名称规范的 id 来命名元素：
hml5 工作表 非常广泛，可以在任何地方使用。 如果您坚持这种命名约定，您应该立即记住设计元素的目的。 如果需要更高的精确度，请尝试使用一些您会理解的人类可读格式 - 您的书写舒适度是高质量代码的关键。
如果您对该主题更感兴趣，请阅读有关精彩杂志“html5 和网络的未来”的完整文章（谷歌搜索：新用户链接限制：/）
You could try naming elements with id of upcoming html5 name specifications:
hml5 sheet which is pretty wide specified for use everywhere. If you stick to this naming conventions you should mediately remember purpose of design element. If more precision is needed try to use some human readable format that you will understand - your writing comfort is key to quality code.
If you are interested more in that topic read full article on smashing magazine "html5 and the future of the web" ( google it: new user link limit :/)