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

CSS Blocks

Stacks27

Followers36

+ 1

Votes0

styled-components

Stacks1.9K

Followers605

+ 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.4K 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?

Manage your open source components, licenses, and vulnerabilities

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

Manage your open source components, licenses, and vulnerabilities

Learn More

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.

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

React

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

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