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
Enforce standards mode in every browser possible with this simple doctype at the beginning of every HTML page.
80
+
81
+
````
82
+
<!DOCTYPE html>
83
+
````
84
+
85
+
86
+
### Pragmatism over semantics
87
+
88
+
Strive to maintain HTML standards and semantics, but don't sacrifice pragmatism. Use the least amount of markup with the fewest intricies whenever possible.
89
+
90
+
91
+
### Attribute order
92
+
93
+
HTML attributes should come in this particular order for easier reading of code.
Questions on the terms used here? See the [syntax section of the Cascading Style Sheets article](http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax) on Wikipedia.
159
+
160
+
161
+
### Declaration order
162
+
163
+
Related declarations should be grouped together, placing positioning and box-model properties closest to the top, followed by typographic and visual properties.
164
+
165
+
````
166
+
.declaration-order {
167
+
/* Positioning */
168
+
position: absolute;
169
+
top: 0;
170
+
right: 0;
171
+
bottom: 0;
172
+
left: 0;
173
+
z-index: 100;
174
+
175
+
/* Box-model */
176
+
display: block;
177
+
float: right;
178
+
width: 100px;
179
+
height: 100px;
180
+
181
+
/* Typography */
182
+
font: normal 13px "Helvetica Neue", sans-serif;
183
+
line-height: 1.5
184
+
color: #333;
185
+
text-align: center;
186
+
187
+
/* Visual */
188
+
background-color: #f5f5f5;
189
+
border: 1px solid #e5e5e5;
190
+
border-radius: 3px;
191
+
192
+
/* Misc */
193
+
opacity: 1;
194
+
}
195
+
````
196
+
197
+
For a complete list of properties and their order, please see [Recess](http://twitter.github.com/recess).
198
+
199
+
200
+
### Formatting exceptions
201
+
202
+
In some cases, it makes sense to deviate slightly from the default [syntax](#css-syntax).
203
+
204
+
#### Prefixed properties
205
+
206
+
When using vendor prefixed properties, indent each property such that the value lines up vertically for easy multi-line editing.
207
+
208
+
````
209
+
.selector {
210
+
-webkit-border-radius: 3px;
211
+
-moz-border-radius: 3px;
212
+
border-radius: 3px;
213
+
}
214
+
````
215
+
216
+
In Textmate, use **Text → Edit Each Line in Selection** (⌃⌘A). In Sublime Text 2, use **Selection → Add Previous Line** (⌃⇧↑) and **Selection → Add Next Line** (⌃⇧↓).
217
+
218
+
#### Rules with single declarations
219
+
220
+
In instances where several rules are present with only one declaration each, consider removing new line breaks for readability and faster editing.
* If using multiple CSS files, break them down by component
316
+
317
+
318
+
319
+
----------
320
+
67
321
68
322
69
323
## Copy
70
324
325
+
### Sentence case
71
326
327
+
Always write copy, including headings and code comments, in [sentence case](http://en.wikipedia.org/wiki/Letter_case#Usage_. In other words, aside from titles and proper nouns, only the first word should be capitalized.
72
328
73
-
-----
74
329
75
330
331
+
----------
332
+
76
333
77
-
### Thanks
78
334
79
-
Heavily inspired by [Idiomatic CSS](https://github.com/necolas/idiomatic-css) and the [GitHub Styleguide](http://github.com/styleguide).
335
+
### Thanks
80
336
81
-
Designed and built with all the love in the world by [@mdo](http://twitter.com/mdo).
337
+
Heavily inspired by [Idiomatic CSS](https://github.com/necolas/idiomatic-css)and the [GitHub Styleguide](http://github.com/styleguide). Made with all the love in the world by [@mdo](http://twitter.com/mdo).
0 commit comments