blocks|key|1153591|text|我认为你混淆了风格论据和标准论据。有些人认为，当创建一个类时，你应该叫它'+headline‘，而不是'blue’--因为如果标题需要变成绿色，你必须改变类的定义和HTML，而不仅仅是重新定义'headline‘类。这是个人喜好，很好的风格，但与任何标准无关。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1153592|类没有“标准”名称，你可以随心所欲地叫它们，所以我不会担心从技术标准的角度来命名类有什么特别的方式。|1153593|此外，由于CSS框架创建的类不是供人编辑的，而只是在框架的上下文中使用，因此它们缺乏语义在框架之外是无关紧要的。|1153594|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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.

blocks|key|4370461|text|我不明白怎么|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4370462|<div+class="span-24+last">|code-block|syntax|javascript|4370463|和|4370464|<div+class="grid_6+prefix_3+suffix_3">|4370465|不符合web标准。这只是分配给单个元素的多个类。|4370466|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I don't see how

<pre><code>&lt;div class="span-24 last"&gt;
</code></pre>

and

<pre><code>&lt;div class="grid_6 prefix_3 suffix_3"&gt;
</code></pre>

fails to comply with web standards. This is simply multiple classes assigned to a single element.

blocks|key|1153511|text|从长远来看，你节省的时间将会丢失。你可能会发现自己总是在css和html之间翻来覆去，试图记住什么是"grid_6“。描述性的类名会有很大帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1153512|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1153656|text|查看Compass。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1153657|它使用Sass+(编译成CSS)，并使用了一些流行的CSS框架的特性。(这并不像听起来那么可怕/奇怪。即使没有CSS框架支持，Sass也是CSS的一个很好的替代品。)|1153658|而不是做|1153659|<ul+class="column_6">...</ul>|code-block|syntax|javascript|1153660|您需要：|1153661|ul.naviation
++color:+#fff
++%2Bcolumn(6)|1153662|，它编译为|1153663|ul.navigation+{
++color:+#fff;
++/*+all+the+rules+for+the+6th+column+a+placed+here+*/
}|1153664|您可以利用CSS框架，同时保持标记的整洁和语义。|1153665|entityMap|0|LINK|mutability|MUTABLE|url|http://wiki.github.com/chriseppstein/compass|1|http://sass-lang.com/^0|2|7|0|0|3|4|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1F|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1H|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1J|8|@]|9|@]|C|$K|L]]|$1|U|3|V|5|6|7|1K|8|@]|9|@]|C|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]]]

Check out <a href="http://wiki.github.com/chriseppstein/compass" rel="nofollow noreferrer">Compass</a>.

It uses <a href="http://sass-lang.com/" rel="nofollow noreferrer">Sass</a> (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

<pre><code>&lt;ul class="column_6"&gt;...&lt;/ul&gt;
</code></pre>

You do:

<pre><code>ul.naviation
 color: #fff
 +column(6)
</code></pre>

which compiles to

<pre><code>ul.navigation {
 color: #fff;
 /* all the rules for the 6th column a placed here */
}
</code></pre>

You can take advantage of CSS frameworks while keeping your markup clean and semantic.

blocks|key|1439526|text|不使用CSS框架|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1439527|因为您的网站不会使用框架提供的所有功能。|1439528|将其作为参考并编写您自己的CSS是很好的。|1439529|它将更容易维护，并且您的css文件将更小。|1439530|只有第一部分会使用960.gs中的is..the+reset.css文件|1439531|重置css文件广泛用于删除DOM元素的所有默认空白。|1439532|entityMap^0|0|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|W|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|X|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|Y|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|Q|$]]

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.

blocks|key|139879|text|您可以尝试用即将到来的html5名称规范的id命名元素：hml5+sheet，它被广泛指定用于任何地方。如果你坚持这个命名惯例，你应该立刻记住设计元素的目的。如果需要更高的精确度，试着使用一些你能理解的人类可读的格式--你的写作舒适感是保证代码质量的关键。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|139880|如果你对这个话题更感兴趣，请阅读smashing杂志上完整文章"html5和网络的未来“(+google+it:+new+user+link+limit+:/)|139881|entityMap|0|LINK|mutability|MUTABLE|url|http://media2.smashingmagazine.com/wp-content/uploads/images/html5/html5_structure.png^0|S|A|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

You could try naming elements with id of upcoming html5 name specifications:
<a href="http://media2.smashingmagazine.com/wp-content/uploads/images/html5/html5_structure.png" rel="nofollow noreferrer">hml5 sheet</a> 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 :/)

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: 

<code>&lt;div class="span-24 last"&gt;</code> 

and 960gs like: <code>&lt;div class="grid_6 prefix_3 suffix_3"&gt;</code>

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: <code>&lt;div class="grid_12" id="menu"&gt;</code> Is there a best practice when using CSS frameworks like these?

Note: I also like nicholaides's suggestion of using Compass/Sass!

CSS Frameworks & "Semantic Naming"

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我已经看过两个CSS框架，它们可以节省我很多时间(Blueprint，960gs)，但对如何使用它们并符合web标准有疑问。例如，Blueprint包含以下内容：<div class="span-24 last">像这样的960G：<div class="grid_6 prefix_3 suffix_3">这对我个人来说并不困扰，但我已经看到有人提到，使用这些非标准名称作为类是不被建议的，并且违反

问CSS框架&“语义命名”
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS框架&“语义命名”EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS框架&“语义命名”
EN