有没有一个标准的方法命名类？ [英] Is there a standard method for naming classes?
问题描述
例如：
class="profile profile-image profile-image-large"
或
class="profile profile-image profile-image-small"
这些名称或破折号有问题吗？ / p>
Is there something wrong with these names or dashes?
推荐答案
说实话，这归功于个人开发者和他们自己的感觉。有两种同样好的方法来构造CSS类，就像你建议的：
To be perfectly honest, this comes down to individual developers and their own feelings. There are two equally good ways of structuring CSS classes, just like you suggested:
.profile.image.large{
width: 300px;
}
/* Or: */
.profile-image-large{
width:300px;
}
他们达到同样的效果，但是当你开始思考时，
They achieve the same thing, but when you start thinking broadly, you see just how wide the gap between these styles becomes.
分隔类可重复使用： DRY 约会是永远不会重复自己。通过分隔大或图像类，我们可以重用同一个类：
Separating classes makes them re-usable: The DRY convention is to never repeat yourself. By separating the large or image classes, we can reuse the same class:
.blue{
border: 3px solid blue; /* All .blue's will have a blue border */
}
.profile.blue{
border-style: dashed; /* Inherits from the previous blue and replaces the solid with a dash. */
}
在第二种方法中 - 使用 / code>分隔符，代码将是：
In the second approach - using - separators, the code would be:
.blue{
border: 3px solid blue; /* All .blue's will have a blue border */
}
.profile-blue{
border: 3px dashed blue; /* We had to redefine the entire style */
}
a border ，这似乎没有关系。但考虑到一个更大的CSS块，你可能想在代码中重复使用几十次。
On a simple example like a border, this doesn't seem to matter. But take into account a much larger CSS chunk that you may want to re-use dozens of times throughout your code. You'll be repeating yourself a lot.
逻辑分组样式仍然是一件好事：我不是说 -classes 是一件坏事 - 它们有助于为您的代码定义命名空间，因此在维护模块化代码的意义上，为您的样式添加标识符将有助于防止冲突，特别是如果你在一个web代理中开发将被重用的代码，或者如果你正在构建一个插件（在这种情况下，风格前缀是绝对需要的）。
Logically grouping styles is still a good thing: I'm not saying that -classes are a bad thing - they help define a namespace for your code, so in the sense of maintaining modular code, prefixing your styles with an identifier will help prevent conflicts, especially if you're developing code inside a web agency that will be re-used, or if you're building a plugin (in which case, style prefixing is absolutely needed).
以编译语言（如SCSS）开发（我的首选环境）会改变你的想法。在SASS / SCSS中，我们可以很容易地这样做：
Developing in a compiled language like SCSS (my preferred environment) changes how you think too. In SASS/SCSS we can easily do this:
.profile{
display: block;
&-image{
border: 1px solid blue;
}
}
并且计算结果与 profile profile-image 。或者SASS还支持：
And that evaluates to the same as profile profile-image on the element. Alternatively SASS also supports:
.profile{
display: block;
&.image{
border: 1px solid blue;
}
}
这将评估 。非常相似 - 但两种样式都限于其父元素 .profile ，不能在全局使用。样式是受保护的，而在我的第一个自然CSS示例中， blue 类可以通过任何
Which evaluates to profile image on an element. Very similar - but both styles are restricted to their parent element .profile and can't be used globally. The styles are protected, whereas in my first 'natural' CSS example, the blue class could freely be added and incorporated by any element in the HTML page.
编辑：您仍然可以使用全局 .image SASS代码，然后重写个别示例，但个人，我觉得这违反了DRY原则，我尽量避免在可能的地方做。
You could still use a global .image style in your SASS code, and then override individual examples, but personally, I feel this violates the DRY principle and I try to avoid doing it where possible.
TL; DR？
在我看来，没有正确答案。从约定的角度来看，值得注意的是，像 Twitter-Boostrap 这样的框架使用两种样式的混合 - 全局类应用到任何地方，混合使用保护他们孩子的风格的前缀类。
In my opinion, there's no "right answer". From a conventions standpoint, it's worth noting that frameworks like Twitter-Boostrap use a hybrid of the two styles - global classes that can be applied everywhere, mixed with prefixed classes that protect their children's styles.
对于任何程序员最重要的是，你的代码是清晰可读和定义的，并且尽可能少的代码实现你的结果 - 无论你使用什么方法。
The most important thing for any programmer is that your code is clearly readable and defined, and that you use as little code as possible to achieve your result - no matter what method you use.
这篇关于有没有一个标准的方法命名类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
