我可以在 CSS 类名中使用驼峰命名法吗
我想命名一个 CSS 类并将其命名为 imgSuper
。我可以在 CSS 类中使用驼峰命名法吗?
I want to name a CSS class and call it imgSuper
. Can I use camelCasing in CSS classes?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
从技术上讲是可以的,但这是有风险的,因为虽然 CSS 语法大多不区分大小写,但在某些浏览器中,在某些条件下,类名被视为区分大小写,因为规范没有指定浏览器在将 CSS 规则与 HTML 类匹配时应如何处理大小写名称。
来自规范,第 4.1.3 节:
与其学习区分大小写的浏览器和条件,不如意识到最好的方法是最兼容的:在给定 CSS 类的所有代码中使用相同的大小写,并且不要创建两个或多个 CSS 类仅大小写不同的名称。
Technically yes, but it's risky because while CSS syntax is mostly case-insensitive, in some browsers under certain conditions, class names are treated as case-sensitive, as the spec does not specify how browsers should handle case when matching CSS rules to HTML class names.
From the spec, section 4.1.3:
Rather than learn the browsers and conditions where case is sensitive, it's best that you just realize that the best approach is the most compatible: use the same case in all code for a given CSS class, and don't create two or more CSS class names that differ only in case.
当然。 这里是官方规则;基本上,名称不应以数字开头,可以使用字母、数字、连字符、下划线以及转义或编码字符。
然而,按照惯例,通常使用连字符而不是驼峰式大小写。
Sure. Here are the official rules; basically you shouldn't start the name with a number, and you can use letters, numbers, hyphen, underscore, and escaped or encoded characters.
However, as a matter of convention, hyphens are generally used instead of camel case.
是的,类名区分大小写,所以效果很好。
但是,您应该意识到某些浏览器会出现此错误,并且不将类名视为区分大小写。因此,您应该避免同时使用同一名称的大写和小写变体。某些浏览器可能会将
imgSuper
和imgsuper
类视为相同的类。Yes, class names are case sensitive, so that works fine.
However, you should be aware that some browsers get this wrong, and don't treat class names as case sensitive. Therefore you should avoid using both the upper and lower case variations of the same name. The classes
imgSuper
andimgsuper
may be treated as the same by some browsers.是的,你可以。请确保,如果您在 css 文件中调用类“fooBar”,则在标记中分配 class="fooBar" 时使用一致的大写字母。
Yes you can. Just be sure that if you call a class "fooBar" in your css file that you use consistent caps when assigning class="fooBar" in your markup.