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技巧不太明顯，請隨時發表評論。