Skip to content

Commit 290737e

Browse files
authored
Update README.md
1 parent 55e11f1 commit 290737e

File tree

1 file changed

+3
-2
lines changed

1 file changed

+3
-2
lines changed

README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,15 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta
4949

5050
## ⚡ Workflow Tips
5151

52+
* Flat, 1 selector per line can be very readable and short. See the examples.
5253
* Use just plain CSS variables in your design system.
5354
* Use the short `@media` queries for responsive design.
5455
* Mobile First (flow: **above** breakpoint): **🟢 None** `sm` `md` `lg` `xl` `xx` 🏁
5556
* Desktop First (flow: **below** breakpoint): 🏁 `xs-` `sm-` `md-` `lg-` `xl-` **🟢 None**
5657
* 🟢 = No breakpoint. Default. See the [Live Example](https://gnat.github.io/css-scope-inline/example.html)!
5758
* Based on [Tailwind](https://tailwindcss.com/docs/responsive-design) breakpoints. We use `xx` not `2xl` to not break CSS highlighters.
58-
* Try tools like- Auto complete styles: [VSCode](https://code.visualstudio.com/) or [Sublime](https://packagecontrol.io/packages/Emmet). Auto fold `<style>` and `<script>` in [Sublime](https://packagecontrol.io/packages/Inline%20Fold)
59-
* These are not for everybody, but you may find them worthwhile.
59+
* Positional selectors may be easier using `div[n1]` for `<div n1>` instead of `div:nth-child(1)`
60+
* Try tools like- Auto complete styles: [VSCode](https://code.visualstudio.com/) or [Sublime](https://packagecontrol.io/packages/Emmet)
6061

6162
## 👁️ CSS Scope Inline vs Tailwind CSS Showdowns
6263
### Basics

0 commit comments

Comments
 (0)