Skip to content
This repository was archived by the owner on Nov 29, 2021. It is now read-only.

Commit 98f1b19

Browse files
author
Jaden Dessureault
committed
Indent blockquotes in markdown guides
This is required to make sure all code blocks have proper syntax highlighting
1 parent 13dc420 commit 98f1b19

File tree

2 files changed

+15
-15
lines changed

2 files changed

+15
-15
lines changed

Diff for: css-in-javascript/README.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
- Use camelCase for object keys (i.e. "selectors").
1616

17-
> Why? We access these keys as properties on the `styles` object in the component, so it is most convenient to use camelCase.
17+
> Why? We access these keys as properties on the `styles` object in the component, so it is most convenient to use camelCase.
1818
1919
```js
2020
// bad
@@ -34,7 +34,7 @@
3434

3535
- Use an underscore for modifiers to other styles.
3636

37-
> Why? Similar to BEM, this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.
37+
> Why? Similar to BEM, this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.
3838

3939
```js
4040
// bad
@@ -64,7 +64,7 @@
6464

6565
- Use `selectorName_fallback` for sets of fallback styles.
6666

67-
> Why? Similar to modifiers, keeping the naming consistent helps reveal the relationship of these styles to the styles that override them in more adequate browsers.
67+
> Why? Similar to modifiers, keeping the naming consistent helps reveal the relationship of these styles to the styles that override them in more adequate browsers.
6868

6969
```js
7070
// bad
@@ -92,7 +92,7 @@
9292

9393
- Use a separate selector for sets of fallback styles.
9494

95-
> Why? Keeping fallback styles contained in a separate object clarifies their purpose, which improves readability.
95+
> Why? Keeping fallback styles contained in a separate object clarifies their purpose, which improves readability.
9696

9797
```js
9898
// bad
@@ -133,7 +133,7 @@
133133

134134
- Use device-agnostic names (e.g. "small", "medium", and "large") to name media query breakpoints.
135135

136-
> Why? Commonly used names like "phone", "tablet", and "desktop" do not match the characteristics of the devices in the real world. Using these names sets the wrong expectations.
136+
> Why? Commonly used names like "phone", "tablet", and "desktop" do not match the characteristics of the devices in the real world. Using these names sets the wrong expectations.
137137

138138
```js
139139
// bad
@@ -155,7 +155,7 @@
155155

156156
- Define styles after the component.
157157

158-
> Why? We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection.
158+
> Why? We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection.
159159

160160
```jsx
161161
// bad
@@ -198,7 +198,7 @@
198198
199199
- Leave a blank line between adjacent blocks at the same indentation level.
200200
201-
> Why? The whitespace improves readability and reduces the likelihood of merge conflicts.
201+
> Why? The whitespace improves readability and reduces the likelihood of merge conflicts.
202202
203203
```js
204204
// bad
@@ -234,7 +234,7 @@
234234
235235
- Use inline styles for styles that have a high cardinality (e.g. uses the value of a prop) and not for styles that have a low cardinality.
236236
237-
> Why? Generating themed stylesheets can be expensive, so they are best for discrete sets of styles.
237+
> Why? Generating themed stylesheets can be expensive, so they are best for discrete sets of styles.
238238
239239
```jsx
240240
// bad
@@ -373,7 +373,7 @@
373373
374374
- Define tricky fallback properties in themes.
375375
376-
> Why? Many CSS-in-JavaScript implementations merge style objects together which makes specifying fallbacks for the same property (e.g. `display`) a little tricky. To keep the approach unified, put these fallbacks in the theme.
376+
> Why? Many CSS-in-JavaScript implementations merge style objects together which makes specifying fallbacks for the same property (e.g. `display`) a little tricky. To keep the approach unified, put these fallbacks in the theme.
377377
378378
```js
379379
// bad

Diff for: react/README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
```
111111
- **Higher-order Component Naming**: Use a composite of the higher-order component's name and the passed-in component's name as the `displayName` on the generated component. For example, the higher-order component `withFoo()`, when passed a component `Bar` should produce a component with a `displayName` of `withFoo(Bar)`.
112112
113-
> Why? A component's `displayName` may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.
113+
> Why? A component's `displayName` may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.
114114

115115
```jsx
116116
// bad
@@ -137,7 +137,7 @@
137137

138138
- **Props Naming**: Avoid using DOM component prop names for different purposes.
139139

140-
> Why? People expect props like `style` and `className` to mean one specific thing. Varying this API for a subset of your app makes the code less readable and less maintainable, and may cause bugs.
140+
> Why? People expect props like `style` and `className` to mean one specific thing. Varying this API for a subset of your app makes the code less readable and less maintainable, and may cause bugs.
141141

142142
```jsx
143143
// bad
@@ -194,7 +194,7 @@
194194

195195
- Always use double quotes (`"`) for JSX attributes, but single quotes (`'`) for all other JS. eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes)
196196

197-
> Why? Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.
197+
> Why? Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.
198198

199199
```jsx
200200
// bad
@@ -289,7 +289,7 @@
289289

290290
- Do not use words like "image", "photo", or "picture" in `<img>` `alt` props. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
291291

292-
> Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text.
292+
> Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text.
293293

294294
```jsx
295295
// bad
@@ -466,7 +466,7 @@
466466

467467
- Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
468468

469-
> Why? A bind call in the render path creates a brand new function on every single render.
469+
> Why? A bind call in the render path creates a brand new function on every single render.
470470

471471
```jsx
472472
// bad
@@ -499,7 +499,7 @@
499499
```
500500

501501
- Do not use underscore prefix for internal methods of a React component.
502-
> Why? Underscore prefixes are sometimes used as a convention in other languages to denote privacy. But, unlike those languages, there is no native support for privacy in JavaScript, everything is public. Regardless of your intentions, adding underscore prefixes to your properties does not actually make them private, and any property (underscore-prefixed or not) should be treated as being public. See issues [#1024](https://github.com/airbnb/javascript/issues/1024), and [#490](https://github.com/airbnb/javascript/issues/490) for a more in-depth discussion.
502+
> Why? Underscore prefixes are sometimes used as a convention in other languages to denote privacy. But, unlike those languages, there is no native support for privacy in JavaScript, everything is public. Regardless of your intentions, adding underscore prefixes to your properties does not actually make them private, and any property (underscore-prefixed or not) should be treated as being public. See issues [#1024](https://github.com/airbnb/javascript/issues/1024), and [#490](https://github.com/airbnb/javascript/issues/490) for a more in-depth discussion.
503503

504504
```jsx
505505
// bad

0 commit comments

Comments
 (0)