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
Copy file name to clipboardExpand all lines: README.md
+6-82Lines changed: 6 additions & 82 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# Airbnb CSS / Sass Styleguide
1
+
# Toll Brothers' CSS / Sass Styleguide
2
2
3
3
*A mostly reasonable approach to CSS and Sass*
4
4
@@ -11,24 +11,20 @@
11
11
1.[CSS](#css)
12
12
-[Formatting](#formatting)
13
13
-[Comments](#comments)
14
-
-[OOCSS and BEM](#oocss-and-bem)
15
14
-[ID Selectors](#id-selectors)
16
15
-[JavaScript hooks](#javascript-hooks)
17
16
-[Border](#border)
18
17
1.[Sass](#sass)
19
-
-[Syntax](#syntax)
20
18
-[Ordering](#ordering-of-property-declarations)
21
19
-[Variables](#variables)
22
20
-[Mixins](#mixins)
23
-
-[Extend directive](#extend-directive)
24
21
-[Nested selectors](#nested-selectors)
25
-
1.[Translation](#translation)
26
22
27
23
## Terminology
28
24
29
25
### Rule declaration
30
26
31
-
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:
27
+
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:
32
28
33
29
```css
34
30
.listing {
@@ -39,7 +35,7 @@ A “rule declaration” is the name given to a selector (or a group of selector
39
35
40
36
### Selectors
41
37
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:
38
+
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:
43
39
44
40
```css
45
41
.my-element-class {
@@ -66,9 +62,9 @@ Finally, properties are what give the selected elements of a rule declaration th
66
62
67
63
### Formatting
68
64
69
-
* Use soft tabs (2 spaces) for indentation
65
+
<!--* Use soft tabs (2 spaces) for indentation-->
70
66
* Prefer dashes over camelCasing in class names.
71
-
- Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem) below).
67
+
<!--- Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem) below).-->
72
68
* Do not use ID selectors
73
69
* When using multiple selectors in a rule declaration, give each selector its own line.
74
70
* Put a space before the opening brace `{` in rule declarations
@@ -113,63 +109,10 @@ Finally, properties are what give the selected elements of a rule declaration th
113
109
- Uses of z-index
114
110
- Compatibility or browser-specific hacks
115
111
116
-
### OOCSS and BEM
117
-
118
-
We encourage some combination of OOCSS and BEM for these reasons:
119
-
120
-
* It helps create clear, strict relationships between CSS and HTML
121
-
* It helps us create reusable, composable components
122
-
* It allows for less nesting and lower specificity
123
-
* It helps in building scalable stylesheets
124
-
125
-
**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's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
129
-
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
-
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.
<h1 class="ListingCard__title">Adorable 2BRin the sunny Mission</h1>
146
-
147
-
<div class="ListingCard__content">
148
-
<p>Vestibulum id ligula porta felis euismod semper.</p>
149
-
</div>
150
-
151
-
</article>
152
-
);
153
-
}
154
-
```
155
-
156
-
```css
157
-
/* ListingCard.css */
158
-
.ListingCard { }
159
-
.ListingCard--featured { }
160
-
.ListingCard__title { }
161
-
.ListingCard__content { }
162
-
```
163
-
164
-
*`.ListingCard` is the “block” and represents the higher-level component
165
-
*`.ListingCard__title` is an “element” and represents a descendant of `.ListingCard` that helps compose the block as a whole.
166
-
*`.ListingCard--featured` is a “modifier” and represents a different state or variation on the `.ListingCard` block.
167
-
168
112
### ID selectors
169
113
170
114
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.
171
115
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.
173
116
174
117
### JavaScript hooks
175
118
@@ -178,7 +121,7 @@ Avoid binding to the same class in both your CSS and JavaScript. Conflating the
178
121
We recommend creating JavaScript-specific classes to bind to, prefixed with `.js-`:
179
122
180
123
```html
181
-
<buttonclass="btn btn-primary js-request-to-book">Request to Book</button>
@@ -203,11 +146,6 @@ Use `0` instead of `none` to specify that a style has no border.
203
146
204
147
## Sass
205
148
206
-
### Syntax
207
-
208
-
* Use the `.scss` syntax, never the original `.sass` syntax
209
-
* Order your regular CSS and `@include` declarations logically (see below)
210
-
211
149
### Ordering of property declarations
212
150
213
151
1. Property declarations
@@ -259,9 +197,6 @@ Prefer dash-cased variable names (e.g. `$my-variable`) over camelCased or snake_
259
197
260
198
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.
261
199
262
-
### Extend directive
263
-
264
-
`@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.
265
200
266
201
### Nested selectors
267
202
@@ -288,14 +223,3 @@ Again: **never nest ID selectors!**
288
223
289
224
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.
290
225
291
-
## Translation
292
-
293
-
This style guide is also available in other languages:
0 commit comments