Looking for a CSS framework that I don't have to fight against it (also Vue Fram...
source link: https://dev.to/patarapolw/looking-for-a-css-framework-that-i-don-t-have-to-fight-against-it-also-vue-framework-j3f
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Looking for a CSS framework that I don't have to fight against it (also Vue Framework)
Apr 16, 2020
・1 min read
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.
patarapolw
/
blogdown-cms
Content Management System, to provide API endpoints for Static Site Generators or JAMStacks
Discussion (21)
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, .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!
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.
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.
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.
CollapseExpand
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.
CollapseExpand
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.
Thread
Thread
CollapseExpand
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.
CollapseExpand
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...)
CollapseExpand
CollapseExpand
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.
CollapseExpand
Tailwind Definetely. The Vue Tailwind Plugin also setups Purge CSS for you ;)
CollapseExpand
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK