Skip to content

Commit e957700

Browse files
authored
Update README.md
1 parent 654f006 commit e957700

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta
5151

5252
* Use just plain CSS variables in your design system.
5353
* Use the short `@media` queries for responsive design. Choose one:
54-
* Mobile First (**above** breakpoint): **DEFAULT ▶️** `@media sm` `@media md` `@media lg` `@media xl` `@media xx`
55-
* Desktop First (**below** breakpoint): `@media xs-` `@media sm-` `@media md-` `@media lg-` `@media xl-` **◀️ DEFAULT**
56-
* Both sets share breakpoints. Mobile First is `xs` default. Desktop First is `xx` default.
57-
* Based on [Tailwind](https://tailwindcss.com/docs/responsive-design) breakpoints. Note: We use `xx` not `2xl` to not break CSS highlighters.
54+
* Mobile First (flow: **above** breakpoint): **🟢 None** `sm` `md` `lg` `xl` `xx` 🏁
55+
* Desktop First (flow: **below** breakpoint): 🏁 `xs-` `sm-` `md-` `lg-` `xl-` **🟢 None**
56+
* 🟢 = No breakpoint. Default. See the [Live Example](https://gnat.github.io/css-scope-inline/example.html)!
57+
* Based on [Tailwind](https://tailwindcss.com/docs/responsive-design) breakpoints. We use `xx` not `2xl` to not break CSS highlighters.
5858
* 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)
5959
* These are not for everybody, but you may find them worthwhile.
6060

@@ -141,6 +141,6 @@ Use whatever you'd like, but there's a few advantages with this approach over Ta
141141
</html>
142142
```
143143

144-
## Technical FAQ
144+
## 🔎 Technical FAQ
145145
* Why do you use `QuerySelectorAll()` and not just process the `MutationObserver` results directly?
146146
* Processing `MutationObserver` results will work well until you begin recieving subtrees (ex: DOM swap, [htmx](https://htmx.org), ajax, jquery) which requires you to walk all subtree child elements to not miss a `<style>`. This can involve re-scanning thousands of repeated elements, and `QuerySelectorAll()` ends up the simplicty and performance winner.

0 commit comments

Comments
 (0)