This app contains a demo usages of different types of CSS selectors to show the performance impact of them. Each example has:
- Bad example - selector that can incur cost
- Good example - applying style rules directly on elemnts using CSS classes
- npm install
- npm run dev
- visit http://localhost:5713
The examples follow a consistent pattern to help with profiling. Each example has a single toggle button that performs some kind of CSS/DOM mutation that should be profiled to check the affected elements and selector matching in a performance profile.
Each scenario has a README that describes the intention behind the example and what the impacts are.
Each example is located under the src/scenarios folder.