How do you work with CSS?

Question

Ok, hope this question doesn't waste anybody's time.

I'm new here, and I come from a background of backend dev. And of course a maker needs fullstack skills. I just wanna understand how do you guys work with css. Do you use any framework? if so is there any you can recommend? Or do you create your own component styles? if so, would you be kind enough to share some tips with me?

I started with semantic ui (and I created https://pincast.live with it), didn't like it. I'm using bulma, like it but still don't feel as free as I want to be.

I noticed some great makers like marc or pieter, they seem to use their own css components (I'm guessing), however, some of their component styles are quite similar to what I see on some other sites as well.

Thanks a lot! (css is my struggle atm)

Bjorn · Accepted Answer

I'm using Bootstrap 4 and write my own CSS using SCSS

Cody Frederick · Answer

I think this is an excellent question because there are a ton of different ways to skin the CSS cat.

If you're using plain old CSS, then what you'll need is a reliable technique to organize it because it tends to get large over time, especially if other developers are working with you. The method that I like is described at https://rscss.io/.

If you're using a single-page-app (SPA) framework like React, Vue, etc. I would suggest giving https://tailwindcss.com/ a spin. Tailwind CSS is considered utility-first, which means that it provides you with class names very similar to CSS keywords. You use these class names to apply the styles. Standard JS components are then used to enforce a consistent look-and-feel. Tailwind is an acquired taste, but I've enjoyed it so far on a couple projects. Here's a helpful link about its utility-first design. https://tailwindcss.com/docs/utility-first/.

Personally, I wouldn't go with a CSS framework unless you need pre-canned designs. CSS has evolved to a point where creating a responsive grid system is very easy. CSS grids (https://css-tricks.com/snippets/css/complete-guide-grid/) and Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) are very well supported now and make this a breeze.

Jankees van Woezik · Answer

For client projects I'm mostly using the BEM approach as Marc mentioned before. Which helps you to create maintainable CSS, mostly by avoiding unnecessary cascading of styles.  

But for my own projects I switched to [TailwindCSS](https://tailwindcss.com/), which makes me really happy. It goes against some principles you might have learned in the past. But I would highly recommend you try it, it makes you very efficient. It feels like you are using Legos. 

If you want to get started with Tailwind I would recommend watching the [Youtube playlist](https://www.youtube.com/playlist?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR) Adam Wathan made (the creator of Tailwind).

Will Willems · Answer

I almost exclusively use Tailwind with `@apply`, sometimes I first try it out on the HTML and then copy it to a dedicated class.

Doing it like this forces me to write more logical CSS and be more DRY (for example having consistent logical margins instead of just adjusting arbitrary elements until it looks good)

Marc Köhlbrugge · Answer

I'm indeed writing my own CSS using the [BEM](https://css-tricks.com/bem-101/) approach. I'm not crazy about it, but it definitely beats my old way of doing things which lacked any structure at all. At least BEM provides some general strategy.

Lately I'm becoming more intrigued by utility-first CSS frameworks like [Tailwind CSS](https://tailwindcss.com). I have yet to actually try it though, but the overall concept makes a lot of sense. Especially after reading [this article](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/).

I've also heard a lot of good things about it. @jankeesvw, do you mind chiming in with your experience?

Adam Liu · Answer

thanks a lot for sharing! reallyappreciate it!

rapid development is really what I need, time is money.

Will Willems · Answer

I use Tailwind with SASS and BEM, this massively speeds up my workflow but it's a very particular setup. I really like how you can use:

```
.my-thing
  prop: foo
  &__title
    prop: bar
```

With SASS and with tailwind you can for example do:

```
.input-container
  @apply relative inline-flex flex-col flex-grow
```

Adam Liu · Answer

thanks for the info! really appreciate it!

Will Willems · Answer

@marc the line-height, or line height is coming out a bit weird which makes the underscores invisible.

Edit: I'm on FF Dev, Mac

Marc Köhlbrugge · Answer

Will fix. Thanks!

Adam Liu · Answer

this is gold! thanks a lot cody!

ya I've checked out the grid and flexbox as well, that's what got me thinking the frameworks I was using was not as good as I wanted them to be.

seems like almost everyone else is pointing to Tailwind so I'll try it out.

really appreciate it Cody!

Marc Köhlbrugge · Answer

I’ve never heard them being combined. How do you decide when to use which? Or is it more of a progression from one to other?

Go to Homepage	`g` `h`
Go to Done Todos	`g` `d`
Go to Questions	`g` `q`
Compose a New Todo	`n`
Go to Search	`/`
Show this dialog	`?`

How do you work with CSS?

Keyboard Shortcuts