You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A “rule declaration” is the name given to a selector (or a group of selectors) with an accompanying group of properties. Here's an example:
34
+
我們把包含一組屬性的一個（或多個組合的）選擇器稱之為 “規則宣告”。舉個例子：
32
35
33
36
```css
34
37
.listing {
@@ -37,9 +40,10 @@ A “rule declaration” is the name given to a selector (or a group of selector
37
40
}
38
41
```
39
42
40
-
### Selectors
43
+
<aname="selectors"></a>
44
+
### 選擇器
41
45
42
-
In a rule declaration, “selectors” are the bits that determine which elements in the DOM tree will be styled by the defined properties. Selectors can match HTML elements, as well as an element's class, ID, or any of its attributes. Here are some examples of selectors:
46
+
在規則宣告中，“選擇器” 決定了 DOM 樹中的哪些元素將被定義的屬性所修飾。選擇器可以配對 HTML 元素，也可以配對一个元素的類別名稱、ID, 或者元素擁有的屬性。以下是選擇器的例子：
43
47
44
48
```css
45
49
.my-element-class {
@@ -51,9 +55,10 @@ In a rule declaration, “selectors” are the bits that determine which element
51
55
}
52
56
```
53
57
54
-
### Properties
58
+
<aname="properties"></a>
59
+
### 屬性
55
60
56
-
Finally, properties are what give the selected elements of a rule declaration their style. Properties are key-value pairs, and a rule declaration can contain one or more property declarations. Property declarations look like this:
**OOCSS**, or “Object Oriented CSS”, is an approach for writing CSS that encourages you to think about your stylesheets as a collection of “objects”: reusable, repeatable snippets that can be used independently throughout a website.
* Smashing Magazine 的[Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
129
139
130
-
**BEM**, or “Block-Element-Modifier”, is a _naming convention_ for classes in HTML and CSS. It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS.
* Harry Roberts 的[introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
134
144
135
-
We recommend a variant of BEM with PascalCased “blocks”, which works particularly well when combined with components (e.g. React). Underscores and dashes are still used for modifiers and children.
While it is possible to select elements by ID in CSS, it should generally be considered an anti-pattern. ID selectors introduce an unnecessarily high level of [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) to your rule declarations, and they are not reusable.
175
+
雖然在 CSS 中，你可以透過 ID 選擇元素，但這種作法應該列為 anti-pattern。ID 選擇器為你的規則宣告帶來了不必要的高[優先權級](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)，而且 ID 選擇器不可重用。
171
176
172
-
For more on this subject, read [CSS Wizardry's article](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) on dealing with specificity.
Avoid binding to the same class in both your CSS and JavaScript. Conflating the two often leads to, at a minimum, time wasted during refactoring when a developer must cross-reference each class they are changing, and at its worst, developers being afraid to make changes for fear of breaking functionality.
We recommend creating JavaScript-specific classes to bind to, prefixed with `.js-`:
184
+
我們推薦在創建用於 JavaScript 的類別名稱時，添加 `.js-` 前綴：
179
185
180
186
```html
181
187
<buttonclass="btn btn-primary js-request-to-book">Request to Book</button>
182
188
```
183
189
184
-
### Border
190
+
<aname="border"></a>
191
+
### 邊框
185
192
186
-
Use`0`instead of `none` to specify that a style has no border.
193
+
在定義無邊框樣式時，使用`0`代替 `none`。
187
194
188
195
**Bad**
189
196
@@ -201,18 +208,21 @@ Use `0` instead of `none` to specify that a style has no border.
201
208
}
202
209
```
203
210
211
+
<aname="sass"></a>
204
212
## Sass
205
213
206
-
### Syntax
214
+
<aname="syntax"></a>
215
+
### 語法
207
216
208
-
*Use the `.scss`syntax, never the original `.sass`syntax
209
-
*Order your regular CSS and`@include`declarations logically (see below)
217
+
*使用 `.scss`的語法，不使用 `.sass`原本的語法。
218
+
* CSS 和`@include`宣告依照以下邏輯排序（詳見下文）
210
219
211
-
### Ordering of property declarations
220
+
<aname="ordering-of-property-declarations"></a>
221
+
### 屬性宣告的排序
212
222
213
-
1.Property declarations
223
+
1.屬性宣告
214
224
215
-
List all standard property declarations, anything that isn't an `@include`or a nested selector.
225
+
列出除了 `@include`與 巢狀選擇器之外的所有屬性宣告。
216
226
217
227
```scss
218
228
.btn-green {
@@ -222,9 +232,9 @@ Use `0` instead of `none` to specify that a style has no border.
222
232
}
223
233
```
224
234
225
-
2. `@include` declarations
235
+
2. `@include` 宣告
226
236
227
-
Grouping `@include`s at the end makes it easier to read the entire selector.
237
+
接著再放入 `@include`，這樣可以提高整個選擇器的可讀性。
228
238
229
239
```scss
230
240
.btn-green {
@@ -235,9 +245,9 @@ Use `0` instead of `none` to specify that a style has no border.
235
245
}
236
246
```
237
247
238
-
3. Nested selectors
248
+
3. 巢狀選擇器
239
249
240
-
Nested selectors, _if necessary_, go last, and nothing goes after them. Add whitespace between your rule declarations and nested selectors, as well as between adjacent nested selectors. Apply the same guidelines as above to your nested selectors.
@@ -251,21 +261,25 @@ Use `0` instead of `none` to specify that a style has no border.
251
261
}
252
262
```
253
263
254
-
### Variables
264
+
<a name="variables"></a>
265
+
### 變數
255
266
256
-
Prefer dash-cased variable names (e.g. `$my-variable`) over camelCased or snake_cased variable names. It is acceptable to prefix variable names that are intended to be used only within the same file with an underscore (e.g. `$_my-variable`).
Mixins should be used to DRY up your code, add clarity, or abstract complexity--in much the same way as well-named functions. Mixins that accept no arguments can be useful for this, but note that if you are not compressing your payload (e.g. gzip), this may contribute to unnecessary code duplication in the resulting styles.
`@extend` should be avoided because it has unintuitive and potentially dangerous behavior, especially when used with nested selectors. Even extending top-level placeholder selectors can cause problems if the order of selectors ends up changing later (e.g. if they are in other files and the order the files are loaded shifts). Gzipping should handle most of the savings you would have gained by using `@extend`, and you can DRY up your stylesheets nicely with mixins.
**Do not nest selectors more than three levels deep!**
282
+
**請不要讓巢狀選擇器超過三層！**
269
283
270
284
```scss
271
285
.page-container {
@@ -277,24 +291,25 @@ Mixins should be used to DRY up your code, add clarity, or abstract complexity--
277
291
}
278
292
```
279
293
280
-
When selectors become this long, you're likely writing CSS that is:
294
+
當上述情況發生時，你也許是這樣寫 CSS 的：
281
295
282
-
* Strongly coupled to the HTML (fragile) *—OR—*
283
-
* Overly specific (powerful) *—OR—*
284
-
* Not reusable
296
+
*與 HTML強耦合的（也是脆弱）*—或者—*
297
+
*過於針對與具體（強大）*—或者—*
298
+
*沒有重複使用程式碼
285
299
286
300
287
-
Again: **never nest ID selectors!**
301
+
再說一遍: **永遠不要巢狀 ID 選擇器！**
288
302
289
-
If you must use an ID selector in the first place (and you should really try not to), they should never be nested. If you find yourself doing this, you need to revisit your markup, or figure out why such strong specificity is needed. If you are writing well formed HTML and CSS, you should **never** need to do this.
303
+
如果你真的必須使用 ID 選擇器（你真的不應該...），那他們也不該是巢狀的。如果你發現你正在這樣做，那你可能需要重新檢查你的markup，或是說明這樣做的原因。如果你想要寫出良好風格的 HTML和 CSS，你絕對**不**應該這麼做。
290
304
291
-
## Translation
305
+
## 翻譯
292
306
293
-
This style guide is also available in other languages:
0 commit comments