Need advice about which tool to choose?Ask the StackShare community!

CSS Blocks

Stacks27

Followers36

+ 1

Votes0

styled-components

Stacks1.8K

Followers602

+ 1

Votes12

Add tool

CSS Blocks vs styled-components: What are the differences?

Developers describe CSS Blocks as "A component-oriented CSS authoring system by LinkedIn". By combining an opinionated authoring system, build-time analysis and rewriting of templates, and a new type of CSS optimizer, css-blocks breathes new power and ease of use into the technologies and best practices that stylesheet developers already know and love. On the other hand, styled-components is detailed as "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress". Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅.

CSS Blocks and styled-components belong to "JavaScript Framework Components" category of the tech stack.

CSS Blocks and styled-components are both open source tools. It seems that styled-components with 24.7K GitHub stars and 1.46K forks on GitHub has more adoption than CSS Blocks with 6.07K GitHub stars and 141 GitHub forks.

Decisions about CSS Blocks and styled-components

Luca Restagno

Co-Founder at iterspace · Jan 30, 2021 | 5 upvotes · 23.2K views

Chose

(

)

Storybook, along with React, styled-components, and Atomic Design, is the perfect tool to boost your front end development productivity. It helps you develop isolated presentational components with a super fast hot reload. It allows to test your props with knobs. Finally you compose, and reuse your components in your app.

You can host your storybook as a static website and share it with the other devs, so they are aware of the components already available in your library, and how to use them.

You can share the same with your UI/UX team, and converge towards a common design system.

You can even run visual regression tests on your library, with storyshots.

Which stack do you use on the Front End?

Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.

Learn More

Pros of CSS Blocks

Pros of styled-components

Be the first to leave a pro

11
Very easy to use and integrate
1
Huihui

Sign up to add or upvote prosMake informed product decisions

What is CSS Blocks?

By combining an opinionated authoring system, build-time analysis and rewriting of templates, and a new type of CSS optimizer, css-blocks breathes new power and ease of use into the technologies and best practices that stylesheet developers already know and love.

What is styled-components?

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Need advice about which tool to choose?Ask the StackShare community!

What companies use CSS Blocks?

What companies use styled-components?

ip finder

See which teams inside your own company are using CSS Blocks or styled-components.

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with CSS Blocks?

What tools integrate with styled-components?

Sign up to get full access to all the tool integrationsMake informed product decisions

What are some alternatives to CSS Blocks and styled-components?

FLEX

FLEX (Flipboard Explorer) is a set of in-app debugging and exploration tools for iOS development. When presented, FLEX shows a toolbar that lives in a window above your application. From this toolbar, you can view and modify nearly every piece of state in your running application.

CSS Modules

It is a CSS file in which all class names and animation names are scoped locally by default. The key words here are scoped locally. With this, your CSS class names become similar to local variables in JavaScript. It goes into the compiler, and CSS comes out the other side.

JavaScript

JavaScript is most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic,and supports object-oriented, imperative, and functional programming styles.

Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

GitHub

GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Over three million people use GitHub to build amazing things together.

See all alternatives

CSS Blocks vs styled-components

Need advice about which tool to choose?Ask the StackShare community!

Pros of CSS Blocks

Pros of styled-components

Sign up to add or upvote prosMake informed product decisions

What is CSS Blocks?

What is styled-components?

Need advice about which tool to choose?Ask the StackShare community!

What companies use CSS Blocks?

What companies use styled-components?

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with CSS Blocks?

What tools integrate with styled-components?

Sign up to get full access to all the tool integrationsMake informed product decisions

Related Comparisons

Trending Comparisons

Top Comparisons