DEV Community

Cover image for What to do if you don't like CSS?
Amr Elmohamady
Amr Elmohamady

Posted on • Updated on • Originally published at amrelmohamady.hashnode.dev

What to do if you don't like CSS?

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

Discussion (20)

Collapse
natelindev profile image
Nathaniel

What to do if you don't like CSS? Learn it, master it, then you'll enjoy writing css.

Collapse
amrelmohamady profile image
Amr Elmohamady Author

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!

Collapse
astrojose profile image
Joseph Emmanuel

The better way to like it

Collapse
arberbr profile image
Arber Braja

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.

Collapse
amrelmohamady profile image
Amr Elmohamady Author

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.

Collapse
mrdanielschwarz profile image
Daniel Schwarz

With all due respect, you should let UX designers make the UX decisions.

Collapse
amrelmohamady profile image
Amr Elmohamady Author

Ok, UI/UX designers can follow Material Design Guidelines and make their own UX decisions.

Collapse
mrdanielschwarz profile image
Daniel Schwarz

UX designers will follow whatever guidelines they see fit.

Thread Thread
amrelmohamady profile image
Amr Elmohamady Author

It's ok if you don't agree with the article. I wrote it because I love Material Design.

Thread Thread
mrdanielschwarz profile image
Daniel Schwarz

You're right. Respectfully, I don't agree.

It's fine if you like Material Design, Tailwind CSS, or whatever, but I highly recommend that if you don't enjoy a certain aspect of development that you let somebody else do it. At the end of the day, the user comes first — the product process doesn't revolve around your personal likes/dislikes, and there certainly aren't many designers who would alter their UX process just to make your job more 'interesting.'

Thread Thread
technoglot profile image
Amelia Vieira Rosado 🐣✨

Spot on! 👌🏻

Collapse
technoglot profile image
Amelia Vieira Rosado 🐣✨ • Edited on

I read the comments below, and I must say I agree with most of them. Just thought I'd add the following to the conversation: @amrelmohamady it works in your best interest to not be as close minded and take the feedback presented below. Don't be so stuck up, you are just getting started in this field. It's fine if you are not fond of CSS, but do not underestimate its value. Additionally, as mentioned below, UI frameworks are not silver bullets. Sometimes, the best approach is to write that darn CSS. Take it or leave it.

Cheers 🍻

Collapse
amrelmohamady profile image
Amr Elmohamady Author

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

Collapse
technoglot profile image
Amelia Vieira Rosado 🐣✨

Also, CSS is important even with using frameworks because you will always need to do something that is not in the framework.

LOL, that is what I just said...

I never say don't learn CSS

Never said you said so 😉

Collapse
tonyketcham profile image
Tony Ketcham

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

Collapse
titungdup profile image
dhondup

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.

Collapse
amrelmohamady profile image
Amr Elmohamady Author

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.

Collapse
louislow profile image
Louis Low • Edited on

My work is crafting UI for the embedded (IoT) applications with Yogurt. The UI design for the TouchPanel that controlling the machines and instruments.

Collapse
wattafot profile image
wattafot

TAILWIND

Collapse
dendihandian profile image
Dendi Handian

As a Backend Engineer, I learn CSS through TailwindCSS