Skip to content

Commit cf1f143

Browse files
committed
move specificity hack to the nested plugin docs
1 parent fac4530 commit cf1f143

File tree

2 files changed

+22
-25
lines changed

2 files changed

+22
-25
lines changed

docs/jss-plugin-nested.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,28 @@ Compiles to:
143143
}
144144
```
145145

146+
## Increase specificity
147+
148+
When extending third party libraries with high secificity selector it's often necessary to also have a high specificity selector.
149+
150+
```javascript
151+
const styles = {
152+
button: {
153+
'.button &': {
154+
color: 'red'
155+
}
156+
}
157+
}
158+
```
159+
160+
Compiles to:
161+
162+
```css
163+
.button .button-0 {
164+
color: 'red';
165+
}
166+
```
167+
146168
### Demo
147169

148170
[CodeSandbox](//codesandbox.io/s/github/cssinjs/jss/tree/master/examples/plugins/jss-plugin-nested?fontsize=14)

docs/jss-syntax.md

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -338,31 +338,6 @@ Compiles to:
338338
}
339339
```
340340

341-
## Specific selectors
342-
343-
When extending third party libraries with high secificity selector it's often necessary to have also have a high specificity.
344-
345-
```javascript
346-
347-
const styles = {
348-
button: {
349-
'.button &': {
350-
color: 'red'
351-
}
352-
}
353-
}
354-
355-
```
356-
357-
Compiles to:
358-
359-
```css
360-
.button .button-0 {
361-
color: 'red'
362-
}
363-
```
364-
365-
366341
## Working with colors
367342

368343
You can use any color conversion tool, e.g. [this one](https://yarnpkg.com/en/package/color).

0 commit comments

Comments
 (0)