DEV Community

Pacharapol Withayasakpunt
Pacharapol Withayasakpunt

Posted on

Looking for a CSS framework that I don't have to fight against it (also Vue Framework)

Example of frameworks that I have to fight against them (due to global styling and common class names)

  • Bootstrap
  • Bulma

Example of Vue frameworks that also have global styling

  • Vuetify
  • Buefy

Well, I was using Buefy all these times.

What should I try next? Can I avoid creating Vue components all by myself?

I am working on this project BTW, which works very well, except if one doesn't use Bulma.

GitHub logo patarapolw / blogdown-cms

Content Management System, to provide API endpoints for Static Site Generators or JAMStacks

Top comments (20)

Collapse
 
ben profile image
Ben Halpern

A comment fairly applicable to all CSS framework convos these days: Have you checked out Tailwind?

The first header on the Tailwind landing page: Most CSS frameworks do too much.

Collapse
 
ekafyi profile image
Eka

I'm going to be unoriginal and be the nth person to recommend Tailwind!!

I used to refuse Tailwind's approach because I found it messy, and I was adamant about "separation of concern" (ie. CSS class names should describe content not presentation) etc. I tried as much as possible to stick to BEM. But as I work in a large web app where features are added, removed, and modified regularly, and I have to create quick prototypes (add to that, I also struggle with the visual side of UI design). Things get messy, I couldn't be as disciplined as I'd ideally be about sticking to the CSS methodology, and vaguely presentational class names like .card, .sidebar and .dropdown start to get thrown to the mix. Then I thought what the heck, might as well go the Tailwind route. And I never looked back! Tailwind is soo helpful for my use case.

I also happen to use Laravel, which has built-in postcss support so I can use the Purgecss feature by literally copy-pasting some 3 lines of code. Slimmer minified build css, more productive & happier dev!

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

Tailwind also seems to use common names, like flex, container as well.

A solution, though, if I need my own class name, is to prefix with something, like a-, for example.

Collapse
 
danielfeldroy profile image
Daniel Feldroy

I agree, Tailwindcss is probably what you want. I tried other tools for years and finally came over to it a couple weeks ago. Now I'm wondering why I delayed for so long.

As someone who has a critical eye for design but struggles with CSS, Tailwindcss gives me the power to do what I want. The class names are easy to remember and the directives are bliss. I can't say enough good things about it.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

Tailwind seems to be good so far.

But as I am making a Markdown Editor, and Tailwind also resets everything, I also need unreset.scss.

Actually, there seems to be an easier way -- Disabling preflight

Collapse
 
jsn1nj4 profile image
Elliot Derhay

I love Tailwind. You can still use it to make your own components if you want, but you'll find yourself remembering the utilities over time too as a side effect of using it.

Collapse
 
applicafroguy profile image
Sivuyile Magutywa

Tailwind is very productive

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

Now that I think about it,

  • Regarding the styling, best framework is no framework; that is pure CSS, e.g. grid or flex. But I do copy ideas from TailwindCSS
  • Regarding the components, I love the idea of shadow DOM, which has isolated CSS environment, while the JavaScript may be connected with the outer side or not. However, I have yet to know more web components libraries.
    • I don't really care about library agnosticism, but rather CSS agonisticism...
  • Maybe, I am shifting my thinking towards that global CSS environment should be touch to the very least. Not even CSS resets or classless CSS.
    • normalize.css might be OK, though; as a normalization of browser wars.
Collapse
 
zazaian profile image
Mike Zazaian

Any reason why you don't want to just write your own CSS with something like SASS or SCSS? It seems like this will usually be the most flexible and most lightweight approach, if that's what you're looking for.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

I can use some global CSS / SCSS, with Vue SFC scoped CSS / SCSS as well. Still I do want to use a pre-made Components. I might go with this option.

Tailwind with purge CSS might not be a option as well, but never tried for real.

Collapse
 
zazaian profile image
Mike Zazaian

Sounds like that might be a good choice. I just know as a matter of experience that I've never needed most of the features offered by really any CSS framework that I've used, and writing most of my own SASS mixins over time to support functionality that I use frequently still gives me flexibility to reuse components, but lets me continue to flex my vanilla CSS muscles and be thoughtful about writing efficient and powerful combinations of CSS declarations.

Thread Thread
 
pkanane profile image
pkanane

Mike I couldn't agree with you more.

Collapse
 
blueboy6 profile image
BlueBoy6 • Edited

God.. i'm alone to think that tailwind sucks ? that's the same sh.. than Bootstrap or jQu.. Oooops.. 😇
well, to answer you, i tried a lot of frameworks this lasts times both for me (side projects) and for my company, and Bulma is realy good for customize and the weight of this one is realy good.
However if you want to quickly craft some apps with amazing presentation, Vuetify is impressive but to customize, it seems to me very hard.

Collapse
 
sanderdebr profile image
sanderdebr

Tailwind is pretty awesome and really flies next to you own CSS.

Otherwise I would suggest Pure or a bit more unknown perhaps Tania Rascia's Primitive which both are minimalist and awesome.

Collapse
 
pkanane profile image
pkanane

You would be better off using pure css. I was in the same fix as you are. I've used Bulma in the past but needed to implement a very custom web app. I was fighting Bulma (my former favourite framework) then I tried tailwind css.. I was aghast. I then tried Pure. I set up SASS and my productivity shot up instantly. I can't recommend Pure CSS + SASS enough.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

Pure CSS is nice in that it is unobtrusive, but in the end, I think I need a series of nice CSS tutorials, such as this one -- dev.to/bnevilleoneill/how-to-style...

As for components, it needs to be unobtrusive as well. I think PrimeVue is one of them, but I should use to the minimum, as it is not cross-framework. (for example, if I use Gatsby...)

Collapse
 
pkanane profile image
pkanane

To answer your questions on components, you can use Keen UI (josephuspaye.github.io/Keen-UI/#/u...)

Collapse
 
netluxe profile image
Netluxe

Haha, not shocked to see that I just logged in to respond and already when I come back to the page, I glance down and notice that Tailwind is already being suggested. Tailwind ROCKS. It is truly a game-changer, in my opinion. The same way that the original Bootstrap was a game-changer for many when it first came out, Tailwind has managed to completely reinvigorate my personal love for the usual front-end development stuff all over again.

Collapse
 
muellercornelius profile image
Cornelius Müller

Tailwind Definetely. The Vue Tailwind Plugin also setups Purge CSS for you ;)

Collapse
 
realtebo profile image
Mirko Tebaldi

Tailwind