What to do if you don't like CSS?

Sometimes as backend developer you need to make user interfaces while you don't like coding visual design.

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.

Sometimes as backend developer you need to make user interfaces while you don't like coding visual design. You don't have to be a CSS hater to read this article!

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.


Also, Tailwind CSS is a great library it offers utility classes for everything and makes the development process so much easier.