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 :-)
Twitter: @Amr__Elmohamady
Top comments (17)
What to do if you don't like CSS? Learn it, master it, then you'll enjoy writing css.
I know CSS and how to do anything with it but, it's just I don't find it interesting to write CSS for me and Material Design is a Great thing even if you love CSS!
The better way to like it
Dont't you find a framework limited sometime? In my experience a framework is a good starting point but usually comes with limitations and performance issues. Handcrafted CSS is still on the long term preferrable compared to a framework. Sometime it depends on the project for sure. Like if I where to build a dashboard I would use a framework regarding UI otherwise I would build the whole thing from scratch.
If I wanted to do something that is not in the Framework I am using I can add a package that will do it for me or if it's simple I can do it in CSS it's ok I used to build Web Apps using CSS long time ago. But until now since I started using Vuetify everything I need is in it.
I don't find it hard to write CSS (Actually, I am really great at CSS), I find it not Interesting.
Also, CSS is important even with using frameworks because you will always need to do something that is not in the framework.
You are right CSS is important and I never say don't learn CSS
Tailwind is a real happy medium for me.
I get all the granular control I want without the pain of writing vanilla CSS or fighting against a framework
There really is no alternative to writing CSS. You will have to write some even if you use CSS frameworks. Best solution is to hire a developer who would happily do it for you.
Actually, I made couple of projects using Vuetify without writing any line of CSS and the design was really great.
Material Design is not just if you don't like css, it's something Really great to use because actually most of Material Design Frameworks take care of Accessiblity and User Experience.
My work is crafting UI for the embedded (IoT) applications with Yogurt. The UI design for the TouchPanel that controlling the machines and instruments.
TAILWIND
It's ok if you don't agree with the article. I wrote it because I love Material Design.
Ok, UI/UX designers can follow Material Design Guidelines and make their own UX decisions.
As a Backend Engineer, I learn CSS through TailwindCSS
Some comments have been hidden by the post's author - find out more