Skip to main content

Shopify Analyzes CSS Frameworks

FeaturesUser storySassCSSTailwindCSS ModulesStitchesVanilla extract w sprinklesEmotion
Open sourceAs a consumer of a library, I want to contribute, request features, resolve issues, and debug the code2222222
Framework agnosticAs 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.2221211
Client-side themingAs a developer, I want to set up client-side theming so my users can control the color scheme with little effort.1121221
Multiple themes (more than 2)As a developer, I want to set up multiple themes (light, dark, dim, etc.) easily to have lots of customization1101221
VariantsAs a developer, I want to extend or override the styles in one place easily1121221
Class names are debuggableAs a developer, I want to easily find the class names for the elements I am debugging in development2222022
Levers are transparent and exposedAs a designer and developer; I want to understand how the inputs to the system affect the outputs of the system1121221
Enables consistent implementation of the design systemAs a designer, I want developers to use consistent values for margins, paddings, font sizes, etc.1121221
Zero-runtimeAs a user, I don't want additional code or processing time spent to see the styles222?021
CSS file outputAs a developer, I want to make a prototype with the CSS outputted quickly2222011
Conditional stylesAs a developer, I want to modify the component for hover, active easily, reduced motion, color scheme, etc.1121221
Override stylesAs a developer, I want to easily modify or create a new style for an existing component1121221
Performant build times021????
LintingAs a developer, I want consistency between files and on saving my documents should format, or a linting test should fail
Glancability and parsableAs a developer, I want to be able to look at a chunk of HTML and be able to understand roughly how it's styled1120120
Naming of CSS rulesAs a developer, coming up with names for classes is hard and doesn't add much value0020120
Placement of CSS rulesAs a developer, I want to avoid scrolling up and down or jumping between files when working with HTML and CSS0020020
Class names are obfuscated in productionAs a developer I want the smallest HTML footprint possible110?222
Class names are not obfuscated in productionAs a designer, I want to be able to jump into the source code and understand how things relate2220000
Typescript supportAs a developer, I want to use typescript to be confident I am using the values correctly0000222
Atomic CSS supportAs a developer, I want the outputted styles to use atomic CSS, so I can easily reduce the total amount of code1120021
Nested arbitrary selectorsAs a developer, I want to style elements if a parent has a span as child & > span2202202
DocumentationAs a developer, I want rich, detailed and up-to-date documentation about the framework2220202
Community โ€” Sense of belongingAs a developer, I want to feel part of a community (discords, conferences, etc)2220111
Community โ€” Crowdsourcing solutionsAs a developer, I want a dependable framework that has been stress tested in many organizations2221002
Autocomplete in VSCodeAs a developer, I want my code editor to autocomplete the design language values0010220
Tooling availabilityAs a developer, I want the ability to install additional tools in VSCode and other IDEs. (Example: Color value preview)2220001
TransferableAs a developer, I want to learn skills that are transferable โ€” to side projects or new employers2211001
Nice to have
RoadmapAs a consumer of a library, I want to see what the roadmap of features looks like1111111
Emoji class namesAs a developer, I want to have fun when prototyping components2202?02