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
+3-2
Original file line number
Diff line number
Diff line change
@@ -49,14 +49,15 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta
49
49
50
50
## ⚡ Workflow Tips
51
51
52
+
* Flat, 1 selector per line can be very readable and short. See the examples.
52
53
* Use just plain CSS variables in your design system.
53
54
* Use the short `@media` queries for responsive design.
54
55
* Mobile First (flow: **above** breakpoint): **🟢 None**`sm``md``lg``xl``xx` 🏁
55
56
* Desktop First (flow: **below** breakpoint): 🏁 `xs-``sm-``md-``lg-``xl-`**🟢 None**
56
57
* 🟢 = No breakpoint. Default. See the [Live Example](https://gnat.github.io/css-scope-inline/example.html)!
57
58
* 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)
0 commit comments