DEV Community

ashish
ashish

Posted on

What tools/frameworks do you use for styling you web app?

One of the most important part of a web app is a good looking and working front end. There are a lot of ways to style your web app from using vanilla CSS to using CSS frameworks like bootstrap or Tailwind or using UI frameworks and component frameworks like Chakra UI, Material UI, Mantine and so on.

I personally use vanilla CSS, Tailwind CSS, chakra UI and Mantine in my projects depending on what I want to achieve. For simple projects, I like using vanilla CSS, but for more complex projects with different UI components I like using Chakra UI, Mantine or Tailwind.

So, what are the tools or frameworks you use for styling your web apps? Let me know in the comments below! 😀

Latest comments (56)

Collapse
 
codeystein profile image
codeyStein

I just go with the trusty SCSS, haven't had the time to learn a css framework, but is something I am looking forward to learn in the future :)

Collapse
 
machy8 profile image
Vladimír Macháček • Edited

Pure CSS via stylifycss.com ❤️
💎 Utility+Components - It doesn't mess your template
💎 Native syntax - you don't have to study nor remember anything
💎 The selectors can be shrinked to bare minimum
💎 No dependencies

Collapse
 
asheeshh profile image
ashish

sounds interesting, adding it to my "use in future projects" list, thanks for the info ❤

Collapse
 
mikoloism profile image
mikoloism • Edited

Custom SCSS style is better to styling 😍

and using Y/Sass as library to make it fast 😋

Collapse
 
andrewbaisden profile image
Andrew Baisden

I prefer to use Vanilla CSS but if I was to use a framework it would be Tailwind CSS. I also sometimes use styled-components in React.

Collapse
 
liviufromendtest profile image
Liviu Lupei

Junior Developer mentioning Tailwind CSS in 3, 2, 1 ...

Collapse
 
asheeshh profile image
ashish

go!!!!!!!!!!!!!!!!

Collapse
 
hnrq profile image
Henrique Ramos • Edited

I like using tailwind, but it really annoys me having a component with 30+ classes. Nowadays I use emotion or SCSS, but leaning a lot towards emotion

Collapse
 
asheeshh profile image
ashish

yes, the class names are indeed a big issue 😅

Collapse
 
prototowb profile image
Tobias Rauer • Edited

How about (S)CSS.
Tailwind is okay for prototyping or when you don't have time or Devs, or a small project in general.
The worst you could ever write is css-in-js (👀@ all the React Devs).

For projects in production, there is only one way if you want to do it right, and that's SCSS with BEM.
Every library will only add tech debt by obfuscating your codebase, removing semantic meaning from elements (opposed to writing your own classes with a certain methodology).

Collapse
 
asheeshh profile image
ashish

I have tried scss, but tailwind is just what I need, also, why do you think css-in-js is the worst approach? 🤔

Collapse
 
gikdev profile image
Mohammad Mahdi Bahrami • Edited

When I wanna make a simple project I use Pico CSS which is "Minimal CSS Framework for semantic HTML"; as they say...

Pico.css • Minimal CSS Framework for semantic HTML

Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. 7.9 kB minified and gzipped!

favicon picocss.com

When I wanna go for a big one I use Tailwind and DaisyUI

Collapse
 
asheeshh profile image
ashish

yes, I have it starred on github!

Collapse
 
nuclearzzet profile image
Nik

I don't use any frameworks or tools for styling my websites, I just use vannila css, but if you use sass, it will make it a bit easy for you, the reason I don't use tailwind or bootstrap is because they make my html a bit complex moreover i like to make my own styles

Collapse
 
liviufromendtest profile image
Liviu Lupei

I agree. I also like to have clean HTML, with few attributes, few classes and stable IDs.
Tailwind is just reusing CSS wrote by whatever company is behind that, not flexible enough for me.

Collapse
 
nuclearzzet profile image
Nik

Yes, It is

Some comments may only be visible to logged-in visitors. Sign in to view all comments.