Skip to content

Add CSS over JS guideline #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+1 −0
Open

Add CSS over JS guideline #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ Interfaces succeed because of hundreds of choices. This is a living, non-exhaust
- **Preload fonts.** For critical text to avoid flash & layout shift.
- **Subset fonts.** Ship only the code points/scripts you use via unicode-range (limit variable axes to what you need) to shrink size.
- **Don’t use the main thread for expensive work.** Move especially long tasks to [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) to avoid blocking interaction with the page.
- **CSS over JS.** Use CSS for conditional styles instead of JavaScript (eg: React props) where possible, using features such as [:has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has), [attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors), & other [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes).

## Design

Expand Down