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.
Top comments (20)
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.
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,.sidebarand.dropdownstart 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!
Tailwind also seems to use common names, like
flex,containeras well.A solution, though, if I need my own class name, is to prefix with something, like
a-, for example.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.
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.How and Why to Un-Reset Tailwind's CSS Reset
shawn swyx wang 🇸🇬 ・ Apr 4 ・ 3 min read
Actually, there seems to be an easier way -- Disabling preflight
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.
Tailwind is very productive
Now that I think about it,
How can I create a web component with an isolated CSS environment?
Pacharapol Withayasakpunt ・ Jul 17 ・ 1 min read
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.
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.
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.
Mike I couldn't agree with you more.
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.
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.
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.
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...)
To answer your questions on components, you can use Keen UI (josephuspaye.github.io/Keen-UI/#/u...)
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.
Tailwind Definetely. The Vue Tailwind Plugin also setups Purge CSS for you ;)
Tailwind