Mark Otto mdo
mdo
/ scss-tests.scss
Last active
March 19, 2022 01:18
You can create the same set of components with HTML and (S)CSS in a handful of ways. Here's how the same set of buttons looks with base and modifier classes, as well as extends and placeholders. The goal is to measure the output—the total number of selectors and declarations. Personally, I consider fewest selectors to be more optimal (for you an…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Original | |
| // | |
| // Markup: | |
| // | |
| // <button class="button">Button</button> | |
| // <button class="button button-primary">Button</button> | |
| // <button class="button button-danger">Button</button> | |
| // | |
| // Total selectors: 6 | |
| // Total declarations: 19 |
NewerOlder