Shopify Analyzes CSS Frameworks

Warning

This post is more than a year old. Information may be outdated.

Solution analysis for Polaris Foundations
Winner: Tailwind

Features	User story	Sass	CSS	Tailwind	CSS Modules	Stitches	Vanilla extract w sprinkles	Emotion
Essential
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