css命名_CSS命名约定将节省您的调试时间

css命名

I have heard lots of developers say they hate CSS. In my experience, this comes as a result of not taking the time to learn CSS.

我听到很多开发人员说他们讨厌CSS。以我的经验，这是因为没有花时间学习CSS。

Korean ??

韩文??

알림: 한국인 독자분들을 위해 본 기사는 한국어로 번역되었으며, 한국어 버전은 여기에서 보실 수 있습니다

알림알림기는는는는는는번역되었으며번역되었으며번역되었으며있습니 있 습니

CSS isn’t the prettiest ‘language,’ but it has successfully powered the styling of the web for over 20 years now. Not doing too badly, huh?

CSS并不是最漂亮的“语言”，但是20多年来，它已经成功地推动了Web样式的发展。表现还不错吧？

However, as you write more CSS, you quickly see one big downside.

但是，当您编写更多CSS时，很快就会看到一大缺点。

It is darn difficult to maintain CSS.

很难维护CSS。

Poorly written CSS will quickly turn into a nightmare.

写得不好CSS很快就会变成一场噩梦。

Here are a few naming conventions that will save you a bit of stress and countless hours down the line.

以下是一些命名约定，这些约定可以为您节省一些压力，并节省大量时间。

使用连字符分隔的字符串 (Use Hyphen Delimited Strings)

If you write a lot of JavaScript, then writing variables in camel case is common practice.

如果您编写了大量JavaScript，则通常以驼峰形式编写变量。

var redBox = document.getElementById('...')

Great, right?

太好了吧？

The problem is that this form of naming isn’t well-suited to CSS.

问题在于这种命名方式不太适合CSS。

Do not do this:

不要这样做：

.redBox {  border: 1px solid red;}

Instead, do this:

相反，请执行以下操作：

.red-box {   border: 1px solid red;}

This is a pretty standard CSS naming convention. It is arguably more readable.

这是一个非常标准CSS命名约定。可以说它更具可读性。

Also, it is consistent with the CSS property names.

另外，它与CSS属性名称一致。

// Correct

.some-class {   font-weight: 10em}

// Wrong

.some-class {   fontWeight: 10em}

BEM命名约定 (The BEM Naming Convention)

Teams have different approaches to writing CSS selectors. Some teams use hyphen delimiters, while others prefer to use the more structured naming convention called BEM.

团队使用不同的方法来编写CSS选择器。一些团队使用连字符定界符，而另一些团队则更喜欢使用称为BEM的更结构化的命名约定。

Generally, there are 3 problems that CSS naming conventions try to solve:

通常，CSS命名约定尝试解决3个问题：

To know what a selector does, just by looking at its name
要了解选择器的功能，只需查看其名称
To have an idea of where a selector can be used, just by looking at it
仅查看一下就可以知道可以在哪里使用选择器
To know the relationships between class names, just by looking at them
仅通过查看即可了解类名之间的关系

Have you ever seen class names written like this:

您是否见过这样写的类名：

.nav--secondary {  ...}

.nav__header {  ...}

That is the BEM naming convention.

这就是BEM命名约定。

向BEM解释5岁 (Explaining BEM to a 5 year Old)

BEM attempts to divide the overall user interface into small reusable components.

BEM试图将整个用户界面划分为多个可重用的组件。

Consider the image below:

考虑下图：

No, it’s not award winning :(

不，它不是获奖的：(

The stick-man represents a component, such as a block of design.

操纵杆代表一种组件，例如设计图块。

You may have already guessed that the B in BEM stands for ‘Block’.

您可能已经猜到BEM中的B代表“块”。

In the real world, this ‘block’ could represent a site navigation, header, footer, or any other block of design.

在现实世界中，此“块”可以表示站点导航，页眉，页脚或任何其他设计块。

Following the practice explained above, an ideal class name for this component would be stick-man.

按照上面说明的做法，此组件的理想类名称是stick-man 。

The component should be styled like so:

该组件的样式应如下所示：

.stick-man {   }

We have used delimited strings here. Good!

我们在这里使用了分隔字符串。好！

E为元素 (E for Elements)

The E in ‘BEM’ stands for Elements.

“ BEM”中的E代表元素。

Overall blocks of design rarely live in isolation.

总体设计模块很少孤立存在。

For instance, the stick-man has a head, two gorgeous arms, and feet.

例如，火柴人有一个head ，两个漂亮的arms和feet 。

The head , feet, and arms are all elements within the component. They may be seen as child components, i.e. children of the overall parent component.

head ， feet和arms都是组件中的所有元素。它们可能被视为子组件，即整个父组件的子组件。

Using the BEM naming convention, element class names are derived by adding two underscores, followed by the element name.

使用BEM命名约定，元素类名称通过添加两个下划线和元素名称来派生。

For example:

例如：

.stick-man__head {

.stick-man__arms {

.stick-man__feet {

M表示修饰符 (M for Modifiers)

The M in ‘BEM’ stands for Modifiers.

“ BEM”中的M代表修饰符。

What if the stick-man was modified and we could have a blue or a red stick- man?

如果火柴人被修改并且我们可以有一个blue或red火柴人怎么办？

In the real world, this could be a red button or blue button. These are modifications of the component in question.

在现实世界中，这可能是red按钮或blue按钮。这些是有关组件的修改。

Using BEM, modifier class names are derived by adding two hyphens followed by the element name.

使用BEM，修饰符类名称是通过在元素名称后添加两个连字符来得出的。

For example:

例如：

.stick-man--blue {

.stick-man--red {

The last example showed the parent component being modified. This is not always the case.

最后一个示例显示父组件已被修改。这并非总是如此。

What if we had stick-men of different head sizes?

如果我们有不同head火柴人怎么办？

This time the element has been modified. Remember, the element is a child component within the overall containing block.

这次元素已被修改。请记住，元素是整个包含块中的子组件。

The .stick-man represents the Block , .stick-man__head the element.

.stick-man代表Block ， .stick-man__head表示元素。

As seen in the example above, double hyphens may also be used like so:

如上例所示，也可以像这样使用双连字符：

.stick-man__head--small {

.stick-man__head--big {

Again, note the use of the double hyphens in the example above. This is used to denote a modifier.

同样，请注意在上面的示例中使用双连字符 。这用于表示修饰符。

Now you’ve got it.

现在您已经掌握了。

That’s basically how the BEM naming convention works.

基本上，这就是BEM命名约定的工作方式。

Personally, I tend to use only hyphen delimeter class names for simple projects, and BEM for more involved user interfaces.

就个人而言，我倾向于仅将连字符分隔符类名称用于简单项目，而将BEM用于涉及更多的用户界面。

You can read more about BEM.

您可以阅读有关BEM的更多信息。

BEM - Block Element ModifierBEM - Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the…getbem.com

BEM-块元素修饰符 BEM-块元素修饰符是一种方法，可以帮助您在… getbem.com中实现可重用的组件和代码共享。

为什么要使用命名约定？ (Why Use Naming Conventions?)

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton
在计算机科学中，只有两个难题：缓存失效和命名( Phil Karlton)

Naming things is hard. We’re trying to make things easier, and save ourselves time in the future with more maintainable code.

命名很难。我们正在尝试使事情变得更容易，并通过更可维护的代码节省将来的时间。

Naming things correctly in CSS will make your code easier to read and maintain.

在CSS中正确命名事物将使您的代码更易于阅读和维护。

If you choose to use the BEM naming convention, it will become easier to see the relationship between your design components/blocks just by looking at the markup.

如果选择使用BEM命名约定，则仅通过查看标记就可以更轻松地查看设计组件/模块之间的关系。

Feeling confident?

感觉有信心？

带JavaScript钩子CSS名称 (CSS Names with JavaScript Hooks)

Today is John’s first day at work.

今天是约翰上班的第一天。

He is handed over an HTML code that looks like this:

他收到了如下所示的HTML代码：

<div class="siteNavigation">

</div>

John has read this article and realizes this may not be the best way to name things in CSS. So he goes ahead and refactors the codebase like so:

John阅读了这篇文章，并意识到这可能不是在CSS命名事物的最佳方法。因此，他继续进行重构，如下所示：

<div class="site-navigation">

</div>

Looks good, huh?

看起来不错吧？

Unknown to John, he had broken the codebase ???

约翰不知道，他破坏了代码库？？？

How?

怎么样？

Somewhere in the JavaScript code, there was a relationship with the previous class name, siteNavigation:

JavaScript代码中的某处与先前的类名称siteNavigation有关系：

//the Javasript code

const nav = document.querySelector('.siteNavigation')

So, with the change in the class name, the nav variable became null.

因此，随着类名的更改， nav变量变为null 。

How sad.

多么悲伤。

To prevent cases like this, developers have come up with different strategies.

为了防止此类情况，开发人员提出了不同的策略。

1.使用js-类名 (1. Use js- class names)

One way to mitigate such bugs is to use a js-* class name to denote a relationship with the DOM element in question.

减轻此类错误的一种方法是使用js-* 类名，表示与所讨论的DOM元素的关系。

For example:

例如：

<div class="site-navigation js-site-navigation">

</div>

And in the JavaScript code:

并在JavaScript代码中：

//the Javasript code

const nav = document.querySelector('.js-site-navigation')

As a convention, anyone who sees the js-site-navigation class name would understand that there is a relationship with that DOM element in the JavaScript code.

按照惯例，任何看到js- site-navigation类名称的人都会理解，JavaScript代码中与该DOM元素存在关联。

2.使用Rel属性 (2. Use the Rel attribute)

I don’t use this technique myself, but I have seen people do.

我本人并没有使用这种技术，但是我看到有人这样做。

Do you recognize this?

你知道吗？

<link rel="stylesheet" type="text/css" href="main.css">

Basically, the rel attribute defines the relationship that the linked resource has to the document from which it’s referenced.

基本上， rel属性定义了链接资源与引用它的文档之间的关系。

In the previous example with John, proponents of this technique would do this:

在前面关于John的示例中，此技术的支持者将这样做：

<div class="site-navigation" rel="js-site-navigation">

</div>

And in the JavaScript:

在JavaScript中：

const nav = document.querySelector("[rel='js-site-navigation']")

I have my doubts about this technique, but you’re likely to come accross it in some codebases. The claim here is, “well, there’s a relationship with Javascript, so I use the rel attribute to denote that”.

我对此技术表示怀疑，但是您可能会在某些代码库中遇到它。这里的主张是， “嗯，与Java语言有关系，所以我使用rel属性来表示这一点” 。

The web is a big place with lots of different “methods” for solving the same problem.

网络是解决许多相同问题的“大方法”。

3.不要使用数据属性 (3. Don’t use data attributes)

Some developers use data attributes as JavaScript hooks. This isn’t right. By definition, data attributes are used to store custom data.

一些开发人员将数据属性用作JavaScript挂钩。这是不对的。根据定义，数据属性用于存储自定义数据 。

Edit #1: As mentioned by some amazing people in the comment section, if people use the ‘rel’ attribute, then it’s perhaps okay to use data attributes in certain cases. It’s your call afterall.

编辑＃1：正如一些很棒的人在评论部分中提到的那样，如果人们使用'rel'属性，那么在某些情况下可以使用数据属性。 毕竟是你的电话。

提示：写更多CSS注释 (Bonus Tip: Write More CSS Comments)

This has nothing to do with naming conventions, but it will save you some time too.

这与命名约定无关，但是也可以节省您一些时间。

While a lot of web developers try to NOT write JavaScript comments or stick to a few, I think you should write more CSS comments.

虽然许多Web开发人员尝试不编写JavaScript注释或坚持一些注释，但我认为您应该编写更多CSS注释。

Since CSS isn’t the most elegant “language,” well-structured comments can save time when you’re trying to understand your code.

由于CSS并不是最优雅的“语言”，因此结构合理的注释可以在您试图理解代码时节省时间。

It doesn’t hurt.

没伤

Take a look at how well commented the Bootstrap source code is.

看一下Bootstrap 源代码的注释程度。

You do not need to write comments to say color: red will give a red color. But, if you’re using a CSS trick that is less obvious, feel free to write a comment.

您无需写评论说color: red将给出红色。但是，如果您使用CSS技巧不太明显，请随时发表评论。