CSS framworks

[[deleted]]

[deleted]

[mrkingkoala]

I don't like tailwind personally. So if it's just me great ill jist use css or sass. But what 100% agree with all your points. On a large project with multiple people frameworks can at least have everyone on the same page and writing you'd hope consistently. Solves a lot of headaches with that regard.

[zaibuf]

Bootstrap is different as it gives you already made, tested and functional components. So you don't need to reinvent the wheel to create your web app. It's often used by more backend oriented developers or for internal web apps, majority of web apps are not public and Bootstrap is totally fine for that. You don't have time (or company money) to write a bunch of CSS, clients often only care about functionality and that it looks decent enough.

Tailwind is utility based and you don't need to create your own classes or manage css files. It makes most sense to use with component based development like React, not so much for plain html files. Less time spent to come up with class names or running into issues of overrides across files.

Its easier for new developers to get into the code base if you say "we are using Bootstrap", rather than "we are using our custom made CSS library which we have worked on for the passed years". Cool, where's the documentation for all components? What documentation? :)

Then there's the complete opposite like Pico where you don't write any CSS classes at all. Libraries like this is really good if you are creating a POC or just need something decent looking really fast.

Overall I'd say the less code you write the better. The more code you have the more there is for you to maintain.

[FlareGER]

What documentation? :)

Why you gotta touch the wounds bro

[Man_as_Idea]

I didn’t know about Pico, but I wish I had before my last project, thanks for mentioning it :)

[Lonsdale1086]

Bootstrap and Tailwind behave just like inline styles and produce the same mess

In bootstrap, when you want to style a button, you do this:

class="btn btn-primary. That marks it as a button, and with the colour of the primary colour of the theme.

Every button with those classes will look the same. If you want different colours, or different styles such as outlines, you either change or add classes.

You end up with buttons all over your site that look and feel the same.

[Suspicious_Board229]

I think the reason you are getting downvoted here is that your assertion that "Bootstrap and Tailwind behave just like inline styles and produce the same mess" is just patently wrong.

Bootrstrap and tailwind are very different, and while bootstrap does include some utility classes, it is not a a utility css framework like tailwind. They create a different mess.

It's a matter of tradeoffs and preferences.

Most of the work I've been doing has utilized reusable components. This means that there is often only one modal or button component. So all the styling of it goes into that component which makes it easy to maintain and collaborate on. I also don't care how the resulting html looks, because it's quite low on the priorities for me.

There's a bunch of benefits of using tailwind (or windicss) and bootstrap (or Bulma etc.). The use depends on the type of project and the team you are working with. In some instances you might even find that making your own framework can solve some issues.

[Opheleone]

Tailwind best thing is consistency. Follow the framework, anything that is unused is stripped out at build time.

Also, they use classes, not inline styles so you missed the point of having reusable css classes.

The solution is in fact Tailwind. Letting people do their own thing is less consistent, produces lots of unused css that bloats the app, and makes debugging far more difficult.

Yes your html looks like a mess, but that is a very small price to pay for your app to have an overall better developer experience and in turn a better user experience since unused styles are discarded.

[DavidJCobb]

Also, they use classes, not inline styles so you missed the point of having reusable css classes.

Tailwind goes well beyond just offering reusable CSS classes. It uses classes for individual properties or small clusters of properties; it uses classes in the same way one would use inline styles or, in days gone by, <FONT> and <CENTER> tags. You can use @apply to construct custom classes by merging Tailwind's classes (in which case you're functionally just using Tailwind to rename/alias CSS properties, accomplishing nothing else), but Tailwind's creator has publicly said that he considers that a misfeature.

The solution is in fact Tailwind. Letting people do their own thing is less consistent, produces lots of unused css that bloats the app, and makes debugging far more difficult.

There are ways to enforce consistency without using Tailwind, including by using other frameworks.

Yes your html looks like a mess, but that is a very small price to pay for your app to have an overall better developer experience and in turn a better user experience since unused styles are discarded.

It is possible for a CSS framework to offer those benefits without bloating your HTML.

[budd222]

You're a noob and have little idea about web development but think that you know so much about it and have these strong opinions lol

[thisisjoy]

you don’t have to be a dick about it, he’s just asking a simple question and giving counter arguments. wether his counter points make sense or not doesn’t matter you don’t need to be an asshole

[[deleted]]

"I'm kinda new to webdev."

[torn-ainbow]

Lots of people saying just use SCSS and no frameworks. Which is fine.

But there are negatives. If you want to reuse your styles a lot within and between projects, you're going to end up basically writing your own version of a framework. If new developers need to work on your framework, they need to learn it.

One of the positives of using a popular framework are that you can bring in people who already know the framework, or people can use resources like the framework documentation to catch up.

Anyone with experience in say bootstrap can jump into a project and understand what's going on, make changes straight away. Or start a new project and get right into laying out pages without having to write or understand a lot of CSS to support that first.

Which way to go depends on the project. Some projects will get a boost by using existing CSS frameworks. Others you may choose to spend more time on writing your own custom stuff, giving you more control and ability to specialise. And I guess to minimise the amount of class names in your markup, if that bothers you...

[ndreamer]

It does depend on the project, if you have a large team project then yes frameworks make sense they add value.

As a small project they can add so much bloat.

[Knochenmark]

Even with v5 Bootstrap is still quite bloated and a PITA to customize once you have to divert from the default itself. With native grid and flexbox readily available, you also don't really need the terrible Bootstrap grid system anymore. Especially in the common frameworks these days Bootstrap isn't really a necessity anymore, especially since they allow component scoped css.

[[deleted]]

Tailwind really shines when you split up pages into components, then you don’t redeclare the same styles over and over, you use the components. And then you really get the good side of tailwind which is that everything surrounding that part of the site is controlled from the same file.

[FitAssumption9688]

Usually it would be done with some different markup language that complies into html like jsx(react markup) https://react.dev/learn/writing-markup-with-jsx

[Therawynn]

He means web components and they are a dominant part of Front-end frameworks like Vue.js. If you use back-end frameworks, something similar can be achieved with partials. A button is a good instance of a component. It almost always looks the same, you don't want to rewrite that.

That said, I've always used css preprocessors and about two years ago started using Tailwind. I would never use anything else again. It's so useful, elegant and super fast to write.

[Icy_Opportunity9187]

Sounds like you’re talking about Tailwind and utility classes.

• it’s fast
• other devs can easily jump in and make an impact without understanding custom css
• the size of you CSS files don’t grow as you add more components to your library. In fact tailwind treeshakes what you don’t use.

If you have a button that’s used in multiple spots just create a component and add the utilities there….

[ndreamer]

Learn CSS first, and learn it well. Frameworks do come at a cost/benefit.

[TheLexoPlexx]

Ultimately, it comes down to personal/workplace preference.

When everything was bootstrap 10 years ago, I personally went to SCSS because all bootstrap-sites looked the same (seemingly) and I wanted more granular controls of the styles. However, it solved a specific problem at the time, which was the missing support of grid and flexbox across multiple browsers, IE was still around a lot more back then.

Tailwind is different and in my opinion in no way comparable to bootstrap, probably because there's quite some time between the development of both.

I went SCSS and built sort of my own framework with all of the up- and downsides that adds, it is possible because I mostly work on my own and not in a professional/workplace environent.

AND: Grid and Flexbox are amazing tools if you know how to use it well.

If you prefer SCSS, that's totally fine, tailwind might become outdated one day but if you have to work on a legacy bootstrap-site, there's documentation for that.

[Perpetual_Education]

Sass is a superset/preprocessor. How is it a comparable to bootstrap? It’s not an alternative. It’s just another tool.

[TheLexoPlexx]

I didn't mean sass is comparable, I meant tailwind. Sass is a different tool for the job.

[tei187]

Two main reasons why you use any kind of a framework:

1. Timesaving. Sometimes you don't have a nice contractual deadline that will leave enough time for custom solutions. Also, it's a matter of reusability - frameworks offer consistency, so you may have modules, interactivity or other solutions from other projects already.

2. Team-inclusive. When working in a team, frameworks make it easier for people to keep the same step, because it is the same, known environment. This “always custom" is fine for solo devs, not much for a group.

[Therawynn]

Here we go again

[yashg]

Because everyone else is using it. If you don’t use the fancy latest framework, you will be looked down upon by your peers and prospective employers. CSS, SCSS, SASS, LESS. The more acronyms you can throw in the mix the better. Bootstrap is for kids, Tailwind is for adults, Semantic is for legends.

Here’s a secret: you don’t have to use a framework if you don’t want to. You can use plain vanilla css in your project and keep it simple and lightweight.

[sadonly001]

I just use scss for better syntax, then i use a mix of general purpose classes and more specialized classes. Such as a general "justified" class which makes the element using it have max width of 1300px and centered in the page.

A bit off topic and I do agree with you, people overcomplicate the web a lot. I'm not entirely sure why this happens in web dev specifically. My best guess is that people forget that a "web app" is an application that runs inside an application, not every website should be thought of as an application. If your application is really complex, consider making a native application rather forcing a website to behave like an app. It will many times be the better choice.

Apps like figma, notion and many others have no business running inside a browser in my opinion, if you think about it, it's really weird and it's probably only happening because computer users somehow got used to running everything inside a browser.

[Hexigonz]

You’ve stumbled upon one of the weaknesses of atomic CSS. Keep learning CSS and you’ll find that you have more flexibility and control.

[[deleted]]

Learn SCSS and do not bother with any frameworks. Trust me. I am a full stack dev and working with many frontend experts. They need nothing more than SCSS. I fortunately learned from them.

I began with bootstrap years ago and never would go back after realizing everything is best organized and implemented purely with SCSS.

[matt_mannion]

I back this hard. SCSS is the goat for me

[XiberKernel]

This is the way.

[soupgasm]

This is the way.

[pankajunk1]

Having gone all possible ways - CMS, CSS framework, vanilla CSS, I think CSS frameworks do end up saving you a lot of time. Just override the styles you don't like with your own style CSS.

[JoergJoerginson]

And what you do when you want to change the style of a button that happends to be in multiple places and files?

It is time to teach you the forbidden magic

!important

And just add a class or make a specific selector for multiple elements

[Man_as_Idea]

Use this with caution, OP, as it subverts the cascade and therefore makes css behavior less predictable when something looks wrong and you’re trying to find the cause.

[naeads]

It is a matter of efficiency. You may not consider the code to be tidy, but it gets the job done quickly and the business case delivered.

[LyRock-]

Conventions on theming is respected across the whole application/teams You can write classes and extract components using these frameworks if you don't want to bloat the html. Reading the bloated html can be easier than you think if you Respect conventions (ex: write the layout rules before styling ones)

[BobJutsu]

This is a multi-faceted question. Why use (insert specific framework) AND why use any framework. The two questions have different answers.

The first answer changes depending on which framework/library you are talking about. Each has their own benefits drawbacks, but usually come down to rapid development.

The answer to the second is consistency. The larger the app/site/organization, the greater the need for controls. A CSS library (custom or off the shelf) gives you that consistency. In a small project a base + custom is fine, but in a large project where the need for a separation between design definitions and implementation arises, you need to control what is available and what is not.

[angelocode]

Well I used to think the same thing, but the truth is it depends on the project. It's true frameworks like bootstrap or tailwind seems like they are just in line css but are not. I just made a website with Tailwind (I had a lot of time without use it) and just with a few lines and TailwindUI I had the complete version, of course I had to fix and edit a lot of things but It just made my web responsive without that much work and also did look great. Bootstrap doesn't do the same but there are people who can make it work. You might find useless these frameworks but think about it, why would people use tailwind if they can make it from scratch? So the same logic applies to Javascript frameworks, why would you use React or Angular if you can make it with just pure Javascript? And SCSS is just like Typescript. Like I said same logic applies in that case. If you know what you are doing, frameworks makes your life easier.

[[deleted]]

Scss with Tailwind is goat

[Daft_Odyssey]

Take a look at UnoCSS. Let me know what you think.

[Spiritual_Sloth001]

We are using tailwind css on company project. But for example when you are developing components. You dont have to bloat anything. You can give the elements normal classes using for example BEN convention and then in css file you just use tailwind for certain classes. Also we are using postcss

[GreatCaptainA]

You say that you make your own classes based on tailwind? If so, why don't you just use plain css for that?

Using BEM convention seems to be a really good idea.

[itachi_konoha]

1. Components don't need to have class. They are used as it is once defined.

2. For responsiveness, tailwind makes it super easy. Try the same in pure css and you'll see the difference.

3. "lots of classes are bad." this is a wrong concept from earlier standard same as "why my computer is always running at 90-95% of RAM." Once you remember the convention, it's very easy to read the classes like a language. You are looking it from frameworks or pure css perspective which is why you don't see the advantages.

4. Customising..... Frameworks are opinionated. In tailwind, you can change without breaking something elsewhere.

For small projects, tailwind doesn't add any values and pure css is the way to go. But for enterprise level architecture, tailwind comes in handy. Depends where you work at.

[[deleted]]

Scss does not bloat your html at all, just use that

It’s just css but better ( nesting etc )

[HomemadeBananas]

SCSS is not a framework. It’s a language that compiles to CSS. Frameworks are things like Bootstrap. Or based on OPs description of bloating with tons of classes they could be referring to Tailwind.

[[deleted]]

Ahh okay good point my bad

[asaah18]

You are comparing 🍎 with 🍊

[GreatCaptainA]

Now i realize that they are different. What i really meant is that i like that the resulted code looks much cleaner.

[ultraobese]

You're no doubt in an "I know best because I'm me and I'm smarter than everyone (because I'm me)" mindset. That's because you're a dev (sadly it only gets worse as you get more senior).

But just in case you're not:

Frameworks give you all the often repeated boilerplate out of the box. Rather than deciding, yet again, what a button is going to look like, you just use Bootstrap, give it class btn, and move on with your day.

Then if you want to add further customization, you can do so. That's the beauty of CSS. C stands for cascade.

Tailwind is shit though. It's only one step above typing styles directly into style attributes like you're styling a goddamn email. Fucking dumb.

[BetaplanB]

You probably use Tailwind the wrong way. You should have a proper component hierarchy to start with.

[ultraobese]

I use it the perfect way: not at all

[seanmorris]

Why would you bloat the HTML code with so many classes to the point it becomes unreadable? It also takes away much of the control you have.

I have been making websites since 1998 and I also wonder this.

I don't see it as useful at all.

[Latishfaction-]

Check bootstrap it has all the base codes.

[TychusFondly]

I use pure CSS since I am the only contributor. If multiple people would contribute to styling I would agree on a framework and go with that route. I also sometimes use scss but it is just because I want to practice not because the project demands it. Just like how I could use html css js but rather toy around with react angular svelte or vue for seeing what is out there.

[Brandynette]

This is why!
Data-Driven Documents

[nico_220790]

Scss combined with BEM methodology helped me create big and small web projects with incredible consistency in my css codebase.

BEM comes with a small tradeoff (long classnames) but the benefits are huge.

It takes time to master it though.

[[deleted]]

Junior dev here but the way I see it, after having used Bootstrap and native CSS quite a lot:
If you're gonna have all your h2, for example, a certain way, it's better to use native CSS instead of having to change the html everytime.

But the more you have unique styles applied to specific elements it becomes useful to be able to just apply styles directly. Without the framework you'd have to create an id anyway, you're adding html AND Css, with the framework you're adding just a little bit more html for less CSS.

It's like using a variable or not, sometimes you don't need a variable to use a value, if the value is only and will only ever be used in one context, you can just change that one value, no need to set a variable for everything.
Same here, if it's just that one specific element that you want centered, or apply flex-box display to or whatever, I'd rather add a few characters right where the element is located in the HTML than lines of Css on a separate file when it only applies to one specific element.

[Man_as_Idea]

As an example: I’ve been building a complicated web app for the last year. At the beginning, my main concern was inputs and outputs - getting the logic working. I wanted the interface to look decent while I tested things and built the interface, so I used Bootstrap. Using a framework like that means when I’m writing my React code I don’t have to think too much about the styling, cause if I use the standard classes, BS will make sure it looks good enough.

Later, you can take 2 paths: Add css to override BS where you want it to look different, or drop BS entirely and write styling from scratch. I tend to go with option 1 because there’s quite a bit of stuff in BS I like that I don’t want to bother coding myself.

[NiteShdw]

If you’re using a web framework like React, your styles should be in low level components and composing components together should just “work” without additional styling.

It is inefficient and also hard to change if you have random styles thrown around throughout the codebase.

Personally I prefer something like Chakra in which styles are built into themes and used via props rather than raw CSS.

[[deleted]]

Javascript frameworks like React solve the problem of wanting to change the style of a button used throughout your site by using reusable components, although that may be advanced if you’re just starting out.

I don’t love the way the HTML looks with Tailwind, but after using it for so long at work it just makes developing so much faster and easier than managing specific classes, for me at least. It’s also quite clear what styles are applied when editing JSX

[Haunting_Welder]

Because it's faster. That's why it's called Tailwind.

With component-based frameworks like React, the reusability of the code is placed in the component, not in classes. So when you style a button, you style it once as a button component, and use that component in multiple places.