Shopify Analyzes CSS Frameworks
Warning
This post is more than a year old. Information may be outdated.
Backlinks1
TailwindComments
cho.shresearchmini
| Open source | As a consumer of a library, I want to contribute, request features, resolve issues, and debug the code | 2 | 2 | 2 | 2 | 2 | 2 | 2 |
| Framework agnostic | As a developer, I want to use this solution across Rails, React, Next.js, React-Native, rollup, Vite, esbuild, webpack, sewing-kit HTML, and Native applications. | 2 | 2 | 2 | 1 | 2 | 1 | 1 |
| Client-side theming | As a developer, I want to set up client-side theming so my users can control the color scheme with little effort. | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
| Multiple themes (more than 2) | As a developer, I want to set up multiple themes (light, dark, dim, etc.) easily to have lots of customization | 1 | 1 | 0 | 1 | 2 | 2 | 1 |
| Variants | As a developer, I want to extend or override the styles in one place easily | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
| Class names are debuggable | As a developer, I want to easily find the class names for the elements I am debugging in development | 2 | 2 | 2 | 2 | 0 | 2 | 2 |
| Levers are transparent and exposed | As a designer and developer; I want to understand how the inputs to the system affect the outputs of the system | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
| Enables consistent implementation of the design system | As a designer, I want developers to use consistent values for margins, paddings, font sizes, etc. | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
| Zero-runtime | As a user, I don't want additional code or processing time spent to see the styles | 2 | 2 | 2 | ? | 0 | 2 | 1 |
| CSS file output | As a developer, I want to make a prototype with the CSS outputted quickly | 2 | 2 | 2 | 2 | 0 | 1 | 1 |
| Conditional styles | As a developer, I want to modify the component for hover, active easily, reduced motion, color scheme, etc. | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
| Override styles | As a developer, I want to easily modify or create a new style for an existing component | 1 | 1 | 2 | 1 | 2 | 2 | 1 |
| Performant build times | 0 | 2 | 1 | ? | ? | ? | ? |
| Important |
| Linting | As a developer, I want consistency between files and on saving my documents should format, or a linting test should fail |
| Glancability and parsable | As a developer, I want to be able to look at a chunk of HTML and be able to understand roughly how it's styled | 1 | 1 | 2 | 0 | 1 | 2 | 0 |
| Naming of CSS rules | As a developer, coming up with names for classes is hard and doesn't add much value | 0 | 0 | 2 | 0 | 1 | 2 | 0 |
| Placement of CSS rules | As a developer, I want to avoid scrolling up and down or jumping between files when working with HTML and CSS | 0 | 0 | 2 | 0 | 0 | 2 | 0 |
| Class names are obfuscated in production | As a developer I want the smallest HTML footprint possible | 1 | 1 | 0 | ? | 2 | 2 | 2 |
| Class names are not obfuscated in production | As a designer, I want to be able to jump into the source code and understand how things relate | 2 | 2 | 2 | 0 | 0 | 0 | 0 |
| Typescript support | As a developer, I want to use typescript to be confident I am using the values correctly | 0 | 0 | 0 | 0 | 2 | 2 | 2 |
| Atomic CSS support | As a developer, I want the outputted styles to use atomic CSS, so I can easily reduce the total amount of code | 1 | 1 | 2 | 0 | 0 | 2 | 1 |
| Nested arbitrary selectors | As a developer, I want to style elements if a parent has a span as child & > span | 2 | 2 | 0 | 2 | 2 | 0 | 2 |
| Documentation | As a developer, I want rich, detailed and up-to-date documentation about the framework | 2 | 2 | 2 | 0 | 2 | 0 | 2 |
| Community -- Sense of belonging | As a developer, I want to feel part of a community (discords, conferences, etc) | 2 | 2 | 2 | 0 | 1 | 1 | 1 |
| Community -- Crowdsourcing solutions | As a developer, I want a dependable framework that has been stress tested in many organizations | 2 | 2 | 2 | 1 | 0 | 0 | 2 |
| Autocomplete in VSCode | As a developer, I want my code editor to autocomplete the design language values | 0 | 0 | 1 | 0 | 2 | 2 | 0 |
| Tooling availability | As a developer, I want the ability to install additional tools in VSCode and other IDEs. (Example: Color value preview) | 2 | 2 | 2 | 0 | 0 | 0 | 1 |
| Transferable | As a developer, I want to learn skills that are transferable -- to side projects or new employers | 2 | 2 | 1 | 1 | 0 | 0 | 1 |
| Nice to have |
| Roadmap | As a consumer of a library, I want to see what the roadmap of features looks like | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| Emoji class names | As a developer, I want to have fun when prototyping components | 2 | 2 | 0 | 2 | ? | 0 | 2 |
| Totals |
| 37 | 39 | 44 | 21 | 32 | 38 | 31 |
No comments yet. Be the first to share your thoughts.