Shulou(Shulou.com)06/03 Report--

This article mainly explains "what are the excellent CSS frameworks in 2021". The explanation in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the excellent CSS frameworks in 2021"?

There are three CSS frameworks

Before we sneak in, you need to understand three different types of CSS frameworks. It's important to make the right choice.

(1) preprocessor and CSS transformer

These are build-time frameworks, and by default they do not output CSS.

They add features that don't exist to write CSS faster.

The famous people I use are SASS,Less,Stylus and PostCSS.

Each has other frameworks or plug-ins based on them. For example, there is SASS written by SASS to create grid layouts faster.

You will often see them included in the front-end framework or booterplates.

They are not CSS UI frameworks.

(2) CSS framework based on UI suites and components

These are the most commonly used CSS frameworks.

They come with pre-built and autonomous UI. This is the fastest way I know to create an interface using CSS.

But they also have their shortcomings. The HTML structure is primarily predefined, and the design is not always easy to customize.

In short: they are very self-righteous.

The ones I've used since 2011: Bootstrap,Foundation,Skeleton,Materialize,Milligram and Bulma.

(3) Atomic / practical first CSS framework

Atomic CSS and utility-first CSS are very similar concepts, and I would even say the same thing, it has become very popular in the past three or four years.

The two main reasons are: React style-components and TailwindCSS.

In short: both concepts include writing CSS classes or properties directly on HTML.

Therefore, it is very flexible, and you can create the HTML structure you want, but in a slow way, rather than with a component-based CSS framework.

If you have read other emails, you will know where I am.

Okay, so what's the best CSS framework?

For me, the best framework depends on three things: design, time, and team.

If the design is common / no design: Bulma or Bootstrap

If the design is complicated, I have time: Tailwind css

If the design is complex, I don't have time: Bulma + a lot of custom CSS

If I need to create a design system: Tailwind CSS

Depending on the size and skills of my team, I will not choose the same tool, and on some very rare occasions, I will do CSS from scratch.

As you can see: there is no perfect framework in all cases.

For most scenarios, such as WebApps,Admin Dashboards and Common Randing pages, component-based frameworks such as Bulma are perfect.

It is perfect for practical frameworks such as specific landing pages or very important pages / WebApps,Tailwind.

Okay, why is Bulma better than Bootstrap and other options?

Foundation is too old, the default design is more difficult to customize

Bootstrap 4's JS is partly dependent on jQuery, but V5 seems promising

The Skeleton and Milligram methods are too basic.

Materialize is so self-righteous that I think it's a little out of date.

Advantages of Bulma:

In most cases, it has many components.

Through SASS default and very easy to customize it is clean

It has its own set of utilities, such a good two worlds

You only load what you need and what is easy to extend

DOC is clear and easy to read (important)

Disadvantages of Bulma:

Nothing is customizable, and in some cases, you need to make CSS override

Why is Tailwind superior to other style components?

Tailewind CSS has a great document and is always improving!

They added CSS gradients, native meshes and conversions to utilities, which seemed impossible due to the number of possible combinations.

Tailwind CSS is also based on a large number of prefabricated templates, such as the official Tailewind UI.

Style components such as CSS-In-JS or atomic CSS frameworks and ACSS.IO don't look like CSS at all. Although the performance is a bit good, it creates a stylesheet based on what you write.

But I prefer to worry about separation with slightly better performance.

Other utilities-first of all framework I have tried like Tachyons we are not natural enough. Tailwind seems to be the most natural and developer friendly.

Disadvantages of Tailwind:

Compilation may be slow as your project grows, but the new JIT compiler will clear this problem.

If you create a custom CSS application like CANVA or GREMFLUS template Builder, it doesn't apply at all.

Thank you for your reading, the above is the content of "what are the excellent CSS frameworks in 2021?" after the study of this article, I believe you have a deeper understanding of the excellent CSS framework in 2021, and the specific use still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.