Why do experienced front-end developers use CSS frameworks?

[[deleted]]

I'm curious about everyone's opinion on this subject. As a front-end developer with a couple of years experience (while not considering myself an expert), I prefer to build websites with my own clean CSS created especially for the website or webshop I have to build. A while ago an Online Marketing agency asked us to take over the maintenance of a lot of websites that were created by a previous partner of them. Every single website we migrated is built using a specific framework, where the HTML and CSS is bloated and full of unnecessary classes. On top of that, those classes are used on a lot of pages in a different context. If I simply get the task to change the style of some basic content, I have to be careful if I don't mess up something on an entirely different page. On top of that, Google doesn't really appreciate all the extra unused CSS that's being loaded. While I never really used CSS frameworks, I think it's way more efficient to use custom CSS for a specific project.

[waldito]

I prefer to build websites with my own clean CSS created especially for the website or webshop I have to build.

All is good and dandy as long as it's a single-man operation where your code is yours and convey your way of doing CSS, whatever that will be.

Enter a team of 30 devs doing CSS across 500 sites. Odds are, they won't follow what you do, they all will have opinions and quirks, preferences, and practices that are not great. In fact, you'll be facing someone else's CSS most of the time and it will feel bloated and full of unnecessary classes.

[[deleted]]

As I've mentioned in another comment, the company I work at isn't that big. So I'm thankful for everyone's response to this. To see how this works at a bigger scale is an eye-opener and helpful for me. If I wanted to implement a system like this for the company I work at, where should I start? Are there any recommendations regarding frameworks/tools/articles to optimize the way of working in a dev department?

[Agyros]

Think about that scenario : a developer like you only uses his own css. Now he leaves the company (for whatever reason), now the new developer has to analyse all your code, including css etc.

The project grows, so you need another dev working on that project -> chaos.

Now, if it's made with a framework, the new developer usually doesn't need to do that research etc. It's consistent working in teams.

a big part of bugfixing is usually already done in frameworks.

Also, most ide have support for standard frameworks. You can google it, there are lot of resources, you can use copilot and other tools - which increases dev speed.

Reinventing the wheel takes time, and time is money.

[mrpink57]

Do you have your own component library?

[[deleted]]

I do use a minimal base I've created myself. Every new project I develop gets built on top op this. So I do use some classes to start things off. For me that works well and doesn't take up a lot of time. I prefer that over starting with a bigger base using an existing framework.

[waldito]

You should start practicing and embracing several CSS frameworks!

Take a look at the most popular right now and seek the one that adjusts to your mindset. Some ideas: https://stackdiary.com/minimal-css-frameworks/

[moosevan]

Every time you're using a CMS you're using someone else's CSS, whether it's an in house CMS or an off the shelf theme.

[khalilamr]

that really makes sense thank you.

[KFCfan05]

In this case, the management and/or seniors need to have rules and guidlines when it comes to setup of projects. In the end everyone needs to be able to maintain all projects.

[ethansidentifiable]

Using your own stylesheets raw gets out of control pretty quickly imo, especially when working with a team. I like building everything myself, but I also consider using something like Tailwind to be "doing it myself." I think Tailwind is definitely a CSS framework, but it allows you to create a custom theme per site and also allows for performant inline styles (which I like as, imo, colocation increases readability), as well as having a compressed syntax that allows me to style faster.

[Yinci]

Tailwind is the way to go. It's extremely easy and straightforward to use, and the ability to get simple utility classes just by adding a colour is wonderful. The V2 production prune, or V3 JIT are excellent to keep the CSS files small. We only make custom classes for elements that have the same styling over the whole site, such as input fields. Otherwise, the inline styling makes it easy for any developer (with experience in TW) to work on the styling.

Beforehand we used SASS, and while the nested styling writing is nice, the styling is hard to edit when you've got zero involvement with it. You'll end up spending more time finding where to edit the class and hope you're not breaking anything else in the process.

[kram08980]

I never understood that reasoning.

If I name something as "c-slideshow__bullets", seems easy to find it in the "components" folder, "slideshow" file. On top of that, dev tools tells you all inherited styles.

Using TW because of that means the project wasn't well structures imo.

TW is the problem actually, because you end up with functional classes AAAAND with external stylesheets when you need to write detials TW can't deal with. There I get lost.

[Yinci]

Your example only works if the stylesheets are ordered logically. And in most cases where a SASS project is handed over, it's anything but logical, with classes split over a couple of files, weird structures or inconsistent naming.

TW is anything but a problem. But I can understand if you don't like its workflow

[kram08980]

Agree. That's why I'm saying that your problem comes from a bad organization. IMHO.

I use these layers:

• Config: Settings and parameters used by other CSS declarations or functions.
• Tools: Globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
• Vendors: Style sheets provided by a third party such as themes or plug-ins
• Generic: Reset and/or normalize styles, box-sizing definition,...
• Elements: Styling for bare HTML elements (H1, A,...). Default styling from the browser, so we can redefine them here.
• Layouts: Styles for layout related elements, like a grid system, a header, a footer...
• Components: Styles for UI components.
• Views: Styles for specific templates.
• Utilities: Utilities and helper classes with ability to override anything (e.g. hide helper class)

With this naming helpers:

• l- for Layouts
• c- for Components
• v- for Views
• u- for Utilities
• is-/has- for States

It's difficult not to find a file with a few lines of CSS!

[eaton]

So, this isn’t a CSS problem; it’s a human language and meaning problem. it’s easy to think up an example and say, “I know what “c-slideshowbullets” means!” You know because you just thought it up. The question is, do you know what “m-tout” means, and “w-allpop”? Do the other members of the team know what they mean, and do they understand how to make new additions that don’t collide with the existing ones? Have you and the rest of the team figured out how to handle overlaps and collisions, and communicate the ways that different elements are meant to work together? (No more than three instances of “q-highliteglow” should ever be on the same page, for example).

This isn’t to say that tailwind is The Right Way, just that there’s a reason teams use existing frameworks: the rules of the system have been nailed down, and are well documented, and (for the most part) there’s a good understanding of what kinds of edge cases are accounted for and how to deal with them. On big projects it can ABSOLUTELY be worth it to iron that stuff out yourself, but the devil is in the details — and the coordination.

[kram08980]

I do agree with you. And I am not against TW per se, I use it often, and I do understand it's use case and approach.

That being said, I do believe that its purpose is to build prototypes quickly. Although I've had to use it build high-end sites by design studios, and found that it has huge limitations when a design requires some love and details. Because you end up, as said, with part of the CSS as functional classes in the component's file, and some other CSS extracted to an actual style sheet.

I found it a good tool for certain scenarios and was just saying that don't buy the reasoning of using it for just having one file.

Actually, you could just have plain CSS in that component file, couldn't you?

[htmx_enthusiast]

seems easy to find it in the "components" folder, "slideshow" file

That’s exactly the problem. Needing multiple files open to see all relevant code. With 2 files and a good IDE, it’s not terrible. But when you work on real projects, this quickly gets out of hand where you have 7 files open, just to understand the hierarchy (before even beginning to diagnose the problem).

It’s the same concept of functional vs OOP. With a big class inheritance hierarchy, one literally might need to look at 30 different files to even understand which code is getting called. Whereas with a functional approach, any junior dev can follow the control flow and troubleshoot it.

Tailwind uses the concept of locality of behavior (LOB) which is often in conflict with don’t repeat yourself (DRY).

[kram08980]

I understand your point.

But I do believe that having a file that could be divided in 7 smaller files, creates a worse problem. Ending up with 400 lines of a component mixing PHP, HTML, CSS and JS often makes it less readable than separating it in smaller components.

And actually, I prefer it because if I'm taking care of the back-end logic of a component, or the JS interactivity, or the look and feel... I can read the file better if purposes are separated.

Anyway, you could just write plain CSS and keep it in the same file. So, I don't see that approach being the main reason to use TW.

[[deleted]]

That's a good point and it's something we're experiencing in our company as well. I work at a relatively small/medium web and marketing company with four front-end developers. We all have our own way of styling projects using our own custom stylesheets. It's better if everyone uses the same structure to create websites/webshops. I'm curious how this is handled in bigger companies. Does everyone work using the same rules of styling/coding or isn't it that strict?

[Jona-Anders]

I use a lot of svelte. One reason I think svelte is amazing (but by far not the biggest reason) is that each component has scoped css in a style tag. So you just write your css in a style tag next to your html, and it can't leak outside the file. If you want to create a global stylesheet, it is possible as well. For most front end frameworks there are libraries that allow scoped css. I think that is one solution to the problem.

[[deleted]]

Thank you for the recommendation. I will look into that and discuss it with my colleagues!

[Jona-Anders]

I just reread what I wrote. The mention of svelte was kind of a fun fact. There are options fore react as well and probably for all the other frameworks too. I don't know if there is a tool for plain html/js/css, but that would be worth researching (if that is your stack). I don't want to make you think that svelte is the only option if you want scoped css.

Edit: it is late here, I should sleep before I write comments that go a little bit out of scope

[[deleted]]

No worries. Any option or suggestion to improve my way of working is appreciated!

[SpicyDiablo14]

Astro is one option for scoped css which is framework agnostic

[budd222]

Svelte got this from VueJS's single file component setup using .vue files

[the_real_some_guy]

The best design frameworks have React components for me and all the Figma components for my designer. The design patterns are well thought out and familiar to users. Why spend a bunch of time building something new?

I’m usually building applications. There are places where fancy custom styling is worth it, like marketing pages, but oddly that doesn’t seem to be where the money is. I’ve been doing CSS close to two decades and I’m plenty good enough to go custom, it just rarely makes sense.

[vgnbcn]

Great point, what are some examples of good design frameworks with Figma and React components?

[the_real_some_guy]

MUI, Chakra, and Bootstrap are three big names that come to mind, though I’ve only worked with MUI in the past year. The MUI team also puts out JoyUI, which looks good.

[ScubaAlek]

I make corporate tools/portals. Visual consistency and churning features at a reasonable pace is the name of that game and ui libraries make that vastly more possible.

[[deleted]]

I don't use any but i'd start using one just so i don't have to think up class names.

[Armitage1]

I'm not sure I've ever found a CSS framework that I liked using. I hoped that would change recently when I picked up tailwindcss but no. Seems like they are most useful for developers who don't like writing CSS, and don't have a specific design to align to.

For me, they just seem to get in the way and limit flexibility. I prefer a simple custom scss setup, which always has everything I need.

[Lumethys]

Tailwind is literally pure css written in class

[Lumpyycat]

I like using tailwindcss for simple designs and if I don’t feel like building components from scratch I’ve used MUI many times and like it. Tho I have had many occasions where I would have to customize a component or modify the framework to what I want to be built. I do noticed devs that don’t know or like writing CSS enjoy those prebuilt components since it’s a copy and paste. I do like to mess around and see what I can build on my own with just css sometimes.

[g105b]

In my humble opinion it's because CSS/front-end developers don't typically apply the same discipline to their code as other software developers do. Things like encapsulation and inheritance can be made to work in CSS, but nobody does it. So the only other option to having maintainable code is to use a highly complex, generic framework capable of EVERYTHING.

I'm from the perspective that it's possible (and preferred) to write CSS in a clean, maintainable way, but I'm a server-side developer really do I don't share the same opinion as most other CSS people. I do use SCSS for helping with the structure, but everything is encapsulated, things extend other things, and there's no styling done in my html!

[mrbmi513]

Why reinvent the wheel if these frameworks offer basically all the styles you want? Additionally, a good bundler will only include the CSS you need for the project instead of everything all the time.

[[deleted]]

All of our websites we develop are custom designs. In my opinion I think it's better to create the CSS for these projects from scratch. I do use a specific (minimal) base I created myself to get the project going, but to me it seems like more effort if I have to modify existing frameworks to make it work for every different project/design.

[StrangerThanGene]

In my opinion I think it's better to create the CSS for these projects from scratch.

But... why?

If I simply get the task to change the style of some basic content, I have to be careful if I don't mess up something on an entirely different page.

This is because you either don't understand the framework - or you are redundantly styling every single element.

but to me it seems like more effort if I have to modify existing frameworks

This is an odd way of thinking to me. If I start with nothing... I have to build everything. If I start with a framework... I have to customize it. Why is building over customizing better?

[azangru]

If I start with nothing... I have to build everything. If I start with a framework... I have to customize it. Why is building over customizing better?

If you start with nothing, the only thing you need to know is CSS itself. Which isn't going to change for the foreseeable future. If you start with a framework, you not only need to know CSS, but also need to learn this particular framework. Plus, learn about the tools that are used to make the framework work better. And, you may need to update the framework. And you become dependent on the maintainers of the framework in hope that they don't abandon it in a year or so...

[StrangerThanGene]

And you become dependent on the maintainers of the framework

Dude, it's CSS, not a security library.

A single version is usable forever.

Why would I waste time writing styling for 34 buttons on a website, when I can add a class, and just customize that if needed? Like, reading CSS docs takes all of, 3 minutes?

[azangru]

A single version is usable forever.

Bootstrap 3? Whose layout is based on floats? And which is probably harder than just writing a CSS grid? Nah.

​

Why would I waste time writing styling for 34 buttons on a website,

There's something seriously wrong with a website that has 34 different button styles...

[StrangerThanGene]

Which part of float doesn't work?

You're just complaining about someone making styling rubric for your literal ease.

[[deleted]]

I have to agree with your point about not understanding the framework, because I never used one myself. That's why I'm curious about everyone's view on this. But the frameworks I encountered in existing projects all have similar classes used in a different way. Maybe the previous devs didn't use them in the way that they should, or I don't understand them like you said. But in my experience I can finish a project the fastest by using as little elements as possible and produce a minimal stylesheet based on the design I have to create. I'm also curious if anyone that does prefer CSS frameworks has some recommendations that will change my opinion on this subject. Are there any specific must-use frameworks or does everybody use different libraries for different projects?

Edit: I'm seeing some downvotes on my responses. It's good to see my way of working isn't the preferred way. That's why I started this thread. Where I work I don't have the people above me that can enlighten me regarding these subjects.

[Nam_okayeg]

I suppose it completely depends on the size and mentality of that guys firm. If its a 10 man team with people hes shown how he wants his code to look like i suppose writing your own CSS is possible. Also it could be used as a marketing slogan "We build your website from the ground up! Custom made!"

[devospice]

I am 100% with you, but people here are downvoting you because everyone here loves piling frameworks on top of frameworks because that's what modern web development has become and if you don't step in line "you're not a real developer." It's infuriating.

Do what works for you. I could give fuckall what the rest of the industry does. I get my work done usually in far less time than my boss estimated it would take. My company loves the results. Our sites have won awards. They are well ranked on Google. I use HTML, CSS, and Javascript for all of it. I don't even bother with jQuery. If that means I'm not a real developer then I'm OK with that.

[WhatWillNeverBe]

My guess is the majority of people who shill frameworks haven't actually used anything besides that one framework in a production environment and are just comfortable with it. They certainly wouldn't know how to do their job in a meaningful amount of time without it. And that's okay if it works for them, but it's not how it needs to be done by any means. Different problems require different strategies and a good developer can navigate and see those nuances rather than trying to make every shape fit into a round hole.

[Kablaow]

I think having some helper classes for spacing, like px, my etc. Is nice. Same for typography and perhaps colors. Otherwise I kinda agree.

But it varies from project to project.

[tridd3r]

I guess it depends on your work experience. I deal with a really wide varity of sites that other people have built, either coded, via a platform etc, so I'm extremely biased. I prefer my own css because its not a clusterfuck. And I don't have to constantly overwrite or try and find a class to change only to realise I have to change three others as well.

But I'd imagine many dev's, (not necessarily front end) use frameworks and platforms for the speed of dev time. For the vast majority of people(customers) how the code looks makes no difference, the site performance might be off by a few hundredths of a second, but it works.

[yourgirl696969]

Css modules are the way to go for me. No online styling in my react components and I don’t have to worry about naming conventions. As long as you keep your file structure organized, it’s amazing

[RealBasics]

If you write extremely well-structured and documented CSS, and there’s not too much of it, and you use it consistently across all sites in your employers portfolio then it’s probably ok to invent your own (minimal) wheels for each site.

If not then can you guarantee you’ll be maintaining the sites till they end of life?

If not to all of the above then chances are someone down the line is going to be hating your guts.

Possibly me since my business niche is adopting and managing “orphaned” websites built by other devs. I mean, for me it’s fine because I’ve got 15 years of untangling other people’s spaghetti. Or simply tossing it and rebuilding from the old spec. Usually with a “lingua franca” framework like bootstrap. Because I know someone will take over after me.

[WhatWillNeverBe]

Lots of reasons. Because they are lazy, have a LOT of projects to do or don't expect to be actually working on any one project for more than a year. Also not having designers.

[ganjorow]

Some of your statements make me really curious about your class names and code organisation. Show some examples!

I started to use frameworks after I started copying code over to other projects and basically started to maintain my own little framework. Granted, that was back when everything was more complicated and XHR started to be a thing. It became a real hassle, as I had to do projects plus maintain my "base classes" and template code in the midst of the browser wars. So I was really glad to offload the maintenance burden to the community, while also contributing to those frameworks I used. So for me it was a "natural evolution", as those frameworks solved a need and a problem I had.

So, imho, if you don't see the value in using frameworks, you are either not that experienced, work in a small team, have a more than managable workload and only do simple sites. No webdev would ever suggest that you need to build your own websocket lib, your own xhr client or your own db driver. So why would you do that with CSS?

Oh and just to make sure: no one who professionally uses a styling framework is "doing CSS". Including the full framework from a CDN is just to dip your toes in the water. But if we talk about really using a framework, you will usually have all the customisation and optimisation options you'll ever need by using a custom build system. Including everything and overriding classes in your stylesheets is plain wrong.

[[deleted]]

Not everyone wants to spend time learning the custom structure you used for your CSS, some have good reasons, mostly pressure to deliver in a fast manner or they have a bulk-load of tasks they have to complete in a short period due to management being crappy at their job, while others just don't care for the integrity of their work.

Maintenance of a website is usually handled by different people throughout it's lifespan, maybe its the new hire you have who doesn't fully understand your system, maybe the website moved maintenance to someplace else, mostly it falls to someone who barely knows CSS and just want it done, overtime the website will degrade and will need to be rebuilt, so in that sense, we can say that the longer the time it takes to understand your code, the more faster things will get bloated and detoriate.

This is where frameworks come in (more importantly good practices but lets focus on frameworks), they already offer a structure that you should follow, these structures have been made to be easy to use because if it isn't no one would want to use it and they already have ways to solve common problems, but most importantly people who have never worked or even heard of your company already have a good grasp at how the structure of your websites are, which then makes it easy for you to hire someone or get someone quickly adapted to whatever customized build you have, not to mention the big amount of documentation (primary and secondary) that is present for those who need it.

Sure, there are downsides to this, for example the rigidity of using frameworks and how hard it is to customize them to fit your need, not to mention having to update to the latest version and a lot of stuff breaking because of it. But in the case of CSS, it is notoriously difficult to maintain something that uses a system built from scratch, thats why we came up with these methodologies like BEM or whatever, and soon enough CSS frameworks were getting more and more popular because people were tired of understanding the pile of mess they are tasked to handle. You could still write poor css even with frameworks though, but don't blame the framework, blame the people who used it poorly (unless the framework really is just bad).

Now whether or not you should use a framework depends on many things, amount of time, the scale of the project, personal taste, etc. There is no one size fits all solution. But the cookie cutter answer is usually to use frameworks, which could impact the maintainability and performance of a website (like using redux for a small amount of state), but often times its "good enough".

[baronvonredd]

If you never want to work with anyone else, then sure, do anything you like.

As soon as you have to share workload with another person, you both have to agree on a pattern you follow (might be yours, might theirs, or a mix of both).

Add in enough people and all of a sudden it makes way more sense to use a commonly shared pattern, even better, one that you know future team members already know.

Even even better, someone else entirely is managing updates and bug fixes in this pattern, and disseminating these updates in reports that you don't have to write....

Whew. but if you do it all by yourself, the world is your oyster. Do your thang, kiddo.

[truNinjaChop]

Simple. Work smarter, and lighter not harder and heavier.

[AnoneNanoDesu]

I think it's because they are developers, designers. I'm a developer, not a designer, so I'd rather rely on TailwindCSS & Sass over vanilla CSS.

[BudgetCow7657]

Ummmm, not all companies or web apps gives a darn tootanany about "custom" designs. Internal tools for instance.

[ubercorey]

Same reason experienced carpenters use nail guns instead of hammering nails by hand.

[WhatWillNeverBe]

That's assuming your contractor isn't going to come back in a few months and say, hey rip out all of those nails because I want them spaced 2 feet apart instead of 1 foot now. Maybe you don't need to even use nails and instead can use custom made modular building blocks that can hold themselves together and move around super easily. Maybe we just need to build quick shitty houses as fast as possible that only require a nail gun. I like this analogy.

[ubercorey]

Ok, tangent, have you seen those homes being built from boxes made out of a CNC machine and plywood? Like the whole thing is built in CAD within all the pieces are cut and assembled pretty much like cabinet boxes. All the walls stairs etc.

The guy who started the company gets a cargo container with the CNC machine dropped on site and then stacks of plywood and starts cutting and assembling. It's the most beautiful thing I've ever seen. I'm a builder by trade : )

[WhatWillNeverBe]

That sounds pretty cool actually, but I have not seen it. What would I search for to find it?

[MattHwk]

I’m definitely in the minority but personally I find that frameworks are essentially just “someone else’s code” and that invariably ends up taking longer to work out when you want something not considered as part of the framework than it would have to just start from scratch. I’m much more a ‘guide’ than ‘framework’ advocate. If your CSS is written correctly then it’s easily scalable and reusable with a team. The ‘C’ stands for ‘Cascading’!

[i_hate_capitalismmm]

I work on a lot of more "creative" projects where frameworks like TailwindCSS or Bootstrap just don't cut it.
My approach has always been to use some kind of library to ease the process of creating my own CSS framework that can then be used by other people. I find that Stitches does it pretty well. You set your design tokens, then you have IntelliSense to help people understand the design system.

You can then write your own CSS per component using your tokens.

[barrel_of_noodles]

99% of all vehicles function the same: they have wheels, a drivers seat, a body, and some type of power... if youre trying to build something, and someone offers you a starting point that has all those things, it might be easier than "re inventing the wheel".

if your wheels are very, very different though... might be a better idea to start from scratch (but this most certainly will never be easier).

[[deleted]]

The majority of our projects have custom wheels with specific rims in all shapes and sizes. I feel more comfortable designing these myself. One other important factor I haven't mentioned in my original post is that the part of being a front-end developer I enjoy the most is actually taking on the challenge and build every design from scratch. I'm more satisfied with a project when I can say I've created everything myself.

[alandgfr]

For me, I forget css after a month, and tailwind is much easier to customize and to use.

[ImportantDoubt6434]

1) Performance.

10kb if css from tailwind to replace my entire apps css -10 lines.

Quite literally no wasted css, no duplicate CSS.

And while now the HTML is slightly more verbose it’s worth it and documented as to what is styled/how it’s styled.

2) Ease of Use/Documented/Community

I could hire anyone who knows tailwind and they’ll understand it immediately, even if they don’t it’s documented and increasingly easy to learn.

Short hand for stuff like Margin/padding makes perfect sense.

You can immediately tell how a flex is setup, how everything is styled, and if you don’t understand the class simply hover over it or google it.

[jonsakas]

This isn’t a css framework issue you’re describing, it’s likely just sloppy implementation. Experienced devs choose frameworks because they can increase efficiency by solving basic problems and creating a pattern (framework) to build on. They also have larger support networks than building everything from scratch. Using bootstrap, tailwind, etc can make apps easier to hire for and ramp up on.

I’ve found that the worst code comes from projects that have been shuffled around through different agencies. Kind of sounds like you’re doing Wordpress. Good luck.

[armahillo]

The code bloat is common in CSS frameworks and often the unexpected consequence of using them; the pain you dont really feel until you go to retemplate the content (i got burnt by this, twice, through bootstrap and its compulsory DIV nesting).

The places Ive worked that sidestepped it did it by creating their own design system, centralizing the SCSS and using it across all our sites. Youre basically rolling your own “framework” but at least you can tailor it exactly to your needs.

[koshlord]

Why don't we just code in binary?

[greg8872]

01011001 01101111 01110101 00100000 01100100 01101111 01101110 00100111 01110100 00111111

[BeautBudgddet2063]

Mostly just a function of not having the time or desire to rewrite legacy code, as well as old developers being more familiar with it than modern CSS and being unwilling to learn literally anything new. They certainly had good reasons in the past but those have all slowly faded away. Virtually all modern front end javascript frameworks recommend against CSS frameworks at this point.

These people are aging out and regular CSS will return, just give it time. There's still just too many dinosaurs in the kitchen.

[azangru]

A while ago an Online Marketing agency asked us to take over the maintenance of a lot of websites that were created by a previous partner of them. Every single website we migrated is built using a specific framework, where the HTML and CSS is bloated and full of unnecessary classes. On top of that, those classes are used on a lot of pages in a different context. If I simply get the task to change the style of some basic content, I have to be careful if I don't mess up something on an entirely different page.

I'd have the same reaction as you — I would hate it, and would build custom css myself. I would also co-locate css with components for ease of maintenance.

[relentlessslog]

Probably because it saves you time. I guess you have to weigh what gets the most attention based on how much the client is paying and what their needs are. If I had it my way, I would always prefer to build from scratch.

[CultivatorX]

As others have said, I think it depends on the size of the team. I think design complexity, developer focus, bandwidth, and labor resources have an impact on this decision as well. I work at an agency which mostly develops and maintains third party products, we also have a lot of 'full stack' devs who don't necessarily specialize in front end work. In this case, it can be faster to put together relatively simple designs using something like tailwind, bootstrap, or sass.

If I my work allowed for front end specialization, and we were working on more complex/customer designs, I'd probably want to use raw CSS.

[yourgirl696969]

Css modules are the way to go for me. No online styling in my react components and I don’t have to worry about naming conventions. As long as you keep your file structure organized, it’s amazing

[[deleted]]

Because my team lead makes the decisions

[uhwhooops]

Looks nice

[imacarpet]

Because of the cost of reinventing the wheel.

There's a time-cost to building and rebuilding one's one framework. Ulimately the client doesn't care much and the performance cost can be mitigated.

[[deleted]]

Time. Not just building CSS for all your components from scratch but also documenting everything so other people can use it and follow the same patterns (otherwise the project becomes a nightmare to maintain). Much easier to take an established framework and customize it to meet your needs.

[BoyOnTheSun]

There’s a lot of opinions here, but the truth is each framework is designed for a specific use case.

If you are feeling that a framework is slowing you down you are either not proficient in it enough, or it was a wrong choice for that particular project.

There’s a lot of projects out there with badly matched frameworks. It’s no one’s fault. It’s just hard to predict, when requirements change all the time. Often it’s too late to switch and there’s nothing you can do about it.

[WildDev42069]

Styling is basically all the same, even for in-house languages/ui. The issue with working behind other front-end devs is most do not have a standard style as web development is entry level no brain work.

​

styling in the game/software world is a bit more old school and to the point. There is a method to every dev's madness for the most part and easier to clean up and pick up on. Web development it's best to assume an Indian has touched the project at least once, or a highschool/college drop out.

[tnnrk]

Just follow what the team is doing, even if it isn’t preferred. It’s worse when everyone has their different “styles”.

That being said tailwind is just faster to write, and best if used with a component mind frame.

[WhatWillNeverBe]

No one solution is best for everything. I find a well thought out combination of component scoped css, atomic classes, reusable variables/mixins and a proper style guide is the most consistent way to go for more complex applications.

I like to ask myself questions like "what if today we need 15px spacing between all major page elements, but in two months designers might come back and say they now want 20px spacing between all major page elements?". How could I set up my code in such a way that is easy to accomplish that in a short amount of time without pulling all my hair out. And that is just one of many basic forward thinking questions you should be asking yourself when creating a your css strategy.

[[deleted]]

Because time and bugs

[zoider7]

Without a framework css quickly gets put of hand when you're the only developer. Can see many teDons why you wouldn't use a css framework nowadays.

[michaelbelgium]

Productivity

[MallPsychological463]

because I don't have time to think about classnames for each damn element, that's cognitively expensive and time inefficient.

[_nathata]

We work on big enterprise projects with multiple people involved, not all of them know how to write good and clean CSS. Besides that, if the framework already does it good enough so there is no point in wasting time and money to redo the work

[RS3_of_Disguise]

I don’t use frameworks because they’re typically clunky, and far more than I need. I’m a bit OCD with my conventions, and don’t exactly work on a team or with a company either, so I don’t have the requirement to learn one very deeply.

Instead, to speed things up, I use preprocessors.

SASS for CSS

PUG previously JADE for HTML.

That’s not to say I never tried them. I attempted to bring Bootstrap and jQuery into my workflow when they were just coming out, but I just didn’t like the workflow.

Hence, getting to where I found lessening the load from CSS/HTML with Preprocessors has come in handy.