What's everyone's choice of CSS framework and or methodologies for creating bespoke designs fast?

Hi guys. I've been trying to work out the best workflow for creating custom CSS for my projects and it seems there's a lot of conflicting information out there. So I just thought I would ask the Dev community and see what you guys think.

Most of my work is building completely bespoke site designs from a Figma or sketch file, either designed by myself or via a design agency.

I often write my CSS from scratch, since that is what I'm used to and it tends to lead to lightweight, permormant and maintainable CSS. The downside is that it can take a really long time and I often find myself writing out a lot of similar CSS patterns project to project (especially for layout). There is also the problem of testing and responsivity that comes with this ground up approach. Another chunk of time involved in making sure it works cross-browser and across the spectrum of devices. I tend to use BEM as it keeps my CSS organised and very maintainable, but it just can be too slow sometimes.

I've been playing with tailwind. I like that I can get a template together in no time, and that I know it will work on all browsers and that it will be responsive. Definitely a headstart. But I find the long utility class names in the markup ugly, then I often still need to introduce some additional CSS in to tweak it here and there. Which just seems clunky.

I've tried other frameworks to help get a headstart on the CSS too, such as foundation. But then I often end up in specificity battles to get from a "foundation" looking site to make it into the custom design.

I don't mind being slow if it means I get it right. But I just wondered what process you guys use? Got any great workflows for building accurate designs in CSS super fast? Please share your ideas.

Comments

[Marcus]

I'm still loving bootstrap, using the scss directly, tweaking some vars and write custom CSS for certain components. It's maybe a bit annoying finding the right variables, but it's a solid start and I can quickly mockup elements using utility classes and later come back and replace some of them with custom css if I need to. I like the Sass utilities (breakpoints, grid) and I think Bootstrap v5 is going to be nice.
I tried tailwind.css and it's a joke. It's like writing inline css and I don't like the workflow introducing a bunch of weight, just to strip it with PostCSS afterwards. The only good thing about Tailwinds is, the defaults are looking nice.

At the end of the day, if you write your own framework/css starter kit, every site will look like that. I think it's a matter of how good you know the framework of choice and how good you know CSS to make the right tweaks to not let it look like the underlying framework. The enduser won't care about that anyway.

[Louis Low]

For some people who dislike to inline the CSS in the HTML, Yogurt CSS has the option to expose it's utility modules into a custom class in a separate CSS file. For example:

<y class="button">
  ...
</y>

.button {
  @extend
    .px-3,
    .py-2,
    .text-teal-100,
    .bg-teal-400;

  &:hover {
    @extend
      .bg-teal-500,
      .shadow;
  }
}

[Marcus]

Thanks for introducing it!
The same is possible with Tailwind, though.

I like the concept, of having a set of rules, that keeps things consistent - that seems to be more flexible than variables.

What I like the most in both frameworks, are the media query modifiers lg:*. That would be my main reason to use either.
Even if Bootstrap Utility classes made it easy to write media queries, this seems easier.

<y class="sm:bg-charcoal-100 lg:bg-red-400">
  ...
</y>