DEV Community

Discussion on: I used Bootstrap too often and I wonder how can I write good CSS without it?

Collapse
 
rojoca_dev profile image
rojoca

Have a look at tailwindcss which is a utility based css framework that is sort of between bootstrap and writing custom CSS. Each tailwind class only applies a single CSS rule which seems counter-productive at first but lets you build out something that looks good really quickly without going back and forward between html and CSS. Here's what it looks like:

<div class="flex flex-row items-start m-4">
    <button class="border border-red rounded text-red bg-white mr-4 px-4 py-2">One</button>
    <button class="border border-green rounded text-green bg-white px-4 py-2">Two</button>
</div>

This turns out to be a great way to learn CSS as you apply it directly to your markup in a more obvious and explicit way than writing the rules yourself.

Additionally, you start with some good default styles that are easy to customise, including media-queries, colour palettes, and REM based text, padding, and margin sizing.

Collapse
 
nepeckman profile image
nepeckman

I second the recommendation for tailwind. I've started using it, and I have learned so much more about CSS. It gives you sensible defaults for things like fonts, colors, and padding, and makes applying those rules super easy.