How to do CSS right in 2020?
After using Bootstrap I´m now wondering if there is a better way to do CSS and responsive design. What are some frameworks I should consider using to make responsive site development easier?
After using Bootstrap I´m now wondering if there is a better way to do CSS and responsive design. What are some frameworks I should consider using to make responsive site development easier?
You'll likely get mobbed by folks who are going to demand that you become a TailwindCSS expert. Not so fast - Bootstrap is excellent, and popular for a good reason. v5 is coming out in the near future and it should continue the trend.
What are you looking to improve? If you need easier, what makes Bootstrap hard?
Tailwind is so straight-forward, there's not much there to be an expert in. It sidesteps 99.9% of the specificity headaches, etc that are common with Bootstrap or MC.
The cost is that it's very low level and you can't do much with it if you aren't already very comfortable with CSS. I'm a fan of it, but me of 7 years ago really would have struggled with it.
I suppose my personal beef with Tailwind is well expressed by the inherent contradiction between "there's not much there to be an expert in" and "it's very low level and you can't do much with it if you aren't already very comfortable with CSS".
I am not saying that Tailwind is bad, or that you shouldn't love it. I will aggressively point out to anyone listening that the only reason you're able to make it do stuff is because you are already "very comfortable" with CSS... a state that is not a casual accomplishment. You have to be able to fully visualize what every CSS property would do on its own and in combination with other properties for Tailwind to be useful. If you are not a CSS expert or not a gifted visual designer, Tailwind is The Swamp of Sadness and you are Artec.
I'm not sure what specificity headaches you're talking about, but I can use Bootstrap to make nice looking cards without CSS class diarreah, and then use a thousand themes to make it look nice, or customize my own. Generally speaking, specifying every CSS property for every DOM element sounds like a nightmare. That's just me.
Yeah, that makes sense.
I actually don't have too many specificity headaches with other frameworks when working on my own stuff, but back when I was an employee at Groupon, it was pretty bad. There were a lot of times when I tried to add classes to style a component only to find that they lost the specificity fight with other classes built by other teams I'd never interacted with.
For example, if you're styling an ordered list with class "foo", you might have a style for
ol.foo li. However, if your styles sheet includes another class forp.content ol li, then your class will have no effect until you add another tag to your style. With multiple teams doing this in a large company, it can get ugly. Even as a solo dev, there have been times when I've been frustrated that a style had no effect due to a Bootstrap style with higher specificity.In contrast, Tailwind is focused on utility classes. You generally won't ever have a class with associated with a specifier with three different HTML tags in it. Instead, you'll have to specify several classes, none of which will be overly specific. This makes it possible to more or less ignore the CSS for things in your app other than the component you're working on.
The sounds painful! But you know, it also sounds like a failure of technical leadership. Maybe I've just been lucky?
It's roughly what I've seen at every fast-growing startup I've been in that used structure-based styles. Groupon's situational was exceptional, but so was their earlier growth and technical debt.
To be clear though, I've been annoyed at Bootstrap's specificity outranking my own classes even on personal projects. It's just part of the territory (and why the idea of needing a Bootstrap or especially MD "expert" does make more sense than it would for a utility class library).
Just trying to find if there is a better way to do things. I keep hearing of tailwind.
That's cool. The reason I initially responded by asking what you were hoping to improve is that I wanted to gauge how confident you are with CSS in general, right now. If you could look down the barrel of a gun and confidently explain what every CSS property does when combined with groups of other properties, then you should definitely try Tailwind, because hey, why not.
I'm just saying that if you're already using Bootstrap and want to be maximally productive, that time could be spent on features instead of bikeshedding.
This comment was deleted 6 years ago
Go vanilla baby. SCSS if you want nesting and loops. Building with a front-end lib like React or Vue? Give CSS modules a try. Want a clean naming convention? BEM all the way.
But really, if you're already comfortable with Bootstrap, that's great. The tool you're productive with is hard to beat.
_utility.scss, you're ultimately looking for an easily scalable way to handle common CSS patterns: typography, spacing, colours, etcThank you
I recently considered moving away from Bootstrap and to Tailwind, but decided to stick with Bootstrap since it serves my needs. You can ramp up a Bootstrap site very quickly. Put your focus into modifying CSS to add your own styles & designs; not every Bootstrap site has to look alike. In Bootstrap, I use mainly the grid for responsive design and the components on an as needed basis. Occasionally, I use the Bootstrap utilities. My aim with Bootstrap is to get the grid and major layout components up quickly, then customize typography, color palette & other details with CSS. Bootstrap allows for a lot of creativity if you're comfortable with CSS.
CSS isn’t my strength and I usually find it quite frustrating to fix the issues. I have used Bulma and bootstrap before but recently I built my new no-codewebsite with Tailwindcss and found it to be quite intuitive and easy to use.
I used to use bootstrap & some other css frameworks like Bulma. But I realized that case frameworks have much more then we need . So I desided to go doing css from scratch.. it was not an easy option but for the peace of mind & quality of work I have starting to creating a codebase or a skeleton. & After each project ends my code base gets improved. Actually taking care of responsive design it's lot more easy & involves less codes with doing it without any frameworks.. it's totally my opinion.
I don’t think there is a universal answer and it depends on your needs and knowledge.
I reckon most indie hackers want something that looks slick but don’t want to learn CSS in depth. If that’s you then Boostrap / Bulma etc. is the way to go and then turn off the pixel perfectionist part of your brain.
If you deeply desire to learn CSS and add design to your portfolio of skills then do some courses on that.
I’ve not used tailwind but from other comments I have read it sounds like it’s is useful in big projects and teams to move responsibility for how things look from the CSS itself to the HTML code (or React or whatever).
My approach for side projects is to use frameworks or ui kits or if Wordpress use a nice theme and not worry too much.
For work there is no luxury of choice you get what everyone else did over the last 10 years of the codebase! If there is enough pain then I’ll research alternatives - so maybe tailwind has some legs and make a recommendation.
Bulma is Quick, but too opinionated.
Tailwind is my new love.
SCSS is your best friend, you can use flexbox.
If you DM me on Twitter and I can pass you some free templates from my website, Wicked Templates.
I am changing the whole concept and I do not mind to give you some templates for free so you can test Tailwind and Bulma.
I like bulma. But if bootstrap gets the job done for you, why change it?
you are right, still is always nice to hear views of other coders.
This comment was deleted 4 years ago
Does that mean you don't use the components, or you don't use the responsive layouts? Genuinely curious.
This comment was deleted 4 years ago
Yeah, I hear you.
One thing I've finally started to get the hang of (probably years behind the pack) is flexbox. I used to endlessly nest rows and cols. I still use the 12-col grid for high-level layout, but within the content areas of my projects, flexbox is amazing. It has just the right amount of customization for my needs.
Component wise, I'm quite glad that I don't have to deal with tabs, and accordions. Also: Bootstrap makes some pretty nice form elements. It's true that there are many comparable libraries, but none of them are built-in and that counts for a lot, especially when you consider themes.
This comment was deleted 4 years ago
One thing I've started doing is using the CSS from BS4 and the JS from BS5, which only uses jQuery if jQuery is in window scope... which it is not. :)
I'd use BS5 CSS too, but 99% of themes have issues with it. Given the major release increment, this is to be expected. It will just a long time for the best themes to catch up to the latest and greatest.
That said... the BS5 JS components are a joy. No jQ in sight.
This comment was deleted 4 years ago
Man, the code formatting on this site.
https://gist.github.com/leastbad/3d5c1c0d5a14cae5e8d4bd188ac902db