Writing CSS sucks!

It's so painful for me to write CSS code even if using a CSS Preprocessor like SASS or LESS, It makes it easier though!

Writing CSS is not interesting for me and not only me there is a lot of people who hate CSS just like me or even more.

You don't have to be a CSS hater to read this article!

I used to build projects using CSS before but when I started coding JavaScript I liked writing Logic more than styling and when I start a project I had to write CSS but I Wanted to write logic more than Styling so...

So, the solution I found that I am currently using is Google Material Design.

Google Material Design Guidelines are some design guidelines that Google uses for all of its projects so as developers how to get benefit from those Guidelines ?!

We use Frameworks that are built on Material Design Guidelines.
I mean using Component-based Frameworks.

Component-based Frameworks are Frameworks with built-in components you can use without writing one line of CSS code.

There is a lot of Frameworks that Component-based but they are not all good. Material Design Frameworks follow standards made by Google's Expert UI Designers and UX Engineers and Researchers.

There are Frameworks that can be used with anything and there are others that only can be used with specific JS Frameworks like Vue, React, Angular, Svelte, and others...

Here's a list of some of them:

1- Frameworks Can be used anywhere

• Material Design: Google's Official Material Design Framework.
• Materialize: A Simple responsive front-end framework based on Material Design.
• Material Design for Bootstrap: A Material Design Framework Based on Bootstrap. It has its own CLI and Flexible to be used With JS Frameworks or Libraries. It has a Pro Version that contains extra components.

2- Frameworks Used with Specific JS Frameworks

• Vuetify: Vue Official Material Design Framework for built-in Vue Components. It's the one I am using.
• Material Ui: React components for faster and easier web development.
• Angular Material: Material Design components for Angular.
• Svelte Material UI: Material UI Components for Svelte.

There a lot of other Frameworks that follow Google Material Design but can't mention all of them :-).

You don't have to be a CSS hater to use Material Design Frameworks!

Something good to mention is there is a Library called Material Design Icons for Icons Check it out.

If you are working in a company as a Frontend developer then usually there's a designer who designs Sketches that you have to turn into code and can't be done with Material Design Frameworks then I advise you to talk to him/her/them or your manager and tell them about Material Design and how it's great and how it delivers the best User Experience So they switch into those great guidelines.

---

I hope you enjoyed this article :-)

Subscribe to my newsletter

Twitter: @Amr__Elmohamady