http://perpetual.education is a design/programming school. We like to be part of the discussion over here at Dev.to / We have time-slots for free conversations for career advice IRL : )
It's 2020. These are all THE WORST. Seriously. This list should be called "the best ways to write CSS for those who are absolutely terrified to even try to learn CSS." Or "The best ways to write the worst markup."
CSS Framework users: explain yourselves.
It's not your fault. This a great list. Good research! But - these are all just sidestepping an absolute truth - that CSS is just AMAZING now / and you don't need all this crap.
"37 and a half ways to avoid just learning a simple declarative language"
We're pushing "like" on this post - because we think the work you put into it is A+ / but if we could put a 💩x20 on the 'frameworks' vs CSS / we would.
(added this example)
Which one of these is readable?
But if you don't want to learn CSS - then maybe frameworks are helpful? / but also if they are sooo fast and helpful - hopefully you don't bill by the hour - because doesn't that mean you'll be out of a job in the near future? Or is it the opposite?
While I agree with the general sentiment that most frameworks suck, a handful of them are actually useful and save time (If you are an experienced developer, I am sure you are saving snippets or bootstrap files of your own to try and reduce the amount of repetition in every project. So you're writing your own framework in one way or another).
That said, lightweight and simple frameworks (written in pure CSS with no compilation required) are always the way to go. Devs should stay away from the monster frameworks that are like using a sledgehammer to put in a nail.
Please, stop lying to yourself. "writing your own framework" is miles away from using a pre-made one that fits all needs (but yours, really).
A framework would never be "written in pure CSS" anyway, that would be a nightmare to maintain. You might only have access to a monolithic, pre-compiled and non configurable version of it, but it doesn't make it simpler. I would even tend to say it's worse as you can't customise it to your needs (if such a thing really exists).
Those frameworks use just a single uncompiled CSS stylesheet, so they require only 1 extra request to load, and they are extremely easy to customise (some of them use a handful of CSS variables to change the entire appearance). To me that's not much of a big deal.
If you want to go one step further, you can use a classless framework, requiring zero modification to HTML code: github.com/troxler/awesome-css-fra....
Google defines a framework as: "a basic structure underlying a system, concept, or text." or "an essential supporting structure of a building, vehicle, or object."
Many experienced developers hear the word "framework" and freak out - without really considering that there are some really useful, extremely lightweight systems out there that are helpful and fully customisable. Of course, no one is forcing you to use them, but you'll find Normalize.css on many websites for a very good reason - it's handy and it saves time.
A framework that doesn't save you time is worthless, I 100% agree with that. But I don't agree with the kneejerk reaction that "All frameworks suck!"
http://perpetual.education is a design/programming school. We like to be part of the discussion over here at Dev.to / We have time-slots for free conversations for career advice IRL : )
Yeah. I guess we're just kinda mad that bootstrap create 50 billions "why doesn't my CSS work" questions across the internet. It's OK. We don't have to agree. You are correct. Everything is a framework.
If it was included the right way, Normalize should be invisible from the final CSS output tho. Either you merge it manually with your own declarations or you merge selectors with some PostCSS (although not recommended as this would potentially change the order of things). Another reason not to just throw some stuff and make an extra http call for things that you would rewrite anyway when writing your own custom CSS. Being able to tell it's used on many websites tells a lot about how much the devs responsible for them care about performance and optimisation.
Call me an old fart if you want but after close to 20 years of CSS I'm yet to find a CSS (not talking about JS here) framework that makes your life easier AND doesn't impact performance.
Thibaut, you should look at AgnosticUI. It does not use PostCSS, Sass, or nada. It's platform CSS. The methodology is essentially SMACSS (although I don't adhere closely; Bootstrap's style is similar with its class chaining). AgnosticUI -- look it up. It's certainly a framework, I am biased but believe it's quite maintainable.
Regarding impacting performance I generally have to agree but with the caveat that I believe it's generally because folks should be more creative in how they use frameworks! First off: at least do yourself a favor and only import modules you're actually using! Second: if you're not worried about being "upgrade safe", steal my buttons and prune the styles you're not using. I spent a lot of time getting them right and will have many bug fixes. Just take my CSS and craft it to your liking. Why reinvent the wheel completely from scratch? Leverage my pain 😄 -- I have to believe you do this anyway. Don't all us "old farts" to some degree.
But for performance, just measure and prune and use discretion. And tell the youngin's to "go learn CSS!" 💪 🍰 ⭐ 🙌
You’re preaching to the choir. What you’ve done is some kind of universal atomic design system. I created one for the company I currently work for and it just saves so much time. The amount of work to get it up to speed is not trivial, and requires deep CSS knowledge, but once you have it running, it’s pretty much like building with LEGO. You don’t have to learn the 150 utility classes from a framework - most of them only emulating inline CSS anyway - and can’t really mess it up as the correct markup is also ready to go. LEGO vs “here’s a blank canvas and a bunch of paint buckets”
Yeah, sounds like we're pretty aligned on design systems aka universal component libraries (I like the atomic part though. Nice touch!).
Yes, it's not trivial to actually get these things done. I think companies are questing the ROI and it's a touchy dance with the stakeholders. I did one for ethos.com and basically before I was even to a place I felt even close to finished I was pulled off the design system to pound out more features. At some point I was asked "hey, who's managing the goals of the design system" and I'm like, wth, y'all took me off of that for your super urgent project. I bet you can relate to this reality too huh Thibaut.
If I'm super honest, I've started AgnosticUI as a survival mechanism so I can show up at a similar job with a more or less complete system that I know and feel good about in terms of a11y, code quality, etc., and I can get something branded in a month or two. Otherwise, yes, it probably takes a year to build a complete system full time dedicated very experienced developer with not just JavaScript skills, but good solid HTML and CSS and a11y skills.
You don’t have to learn the 150 utility classes from a framework
Yeah, I agree. I call this having to learn a DSL (domain specific language) + CSS. You can't really use a CSS utility library effectively in the first place if you don't know CSS. The only thing I'd admit a utility gives you is decent values perhaps. But yeah, I'm in your boat and just can't see myself doing anything but prototypes this way. Bootstrap 5 has a fair set of utilities and my colleagues have pretty much made certain sections look like we're using Tachyons or TW and then we have like 15 off canvas drawers and have some crucial h100 nested code and forget it in one place and I'm hunting down the bug lol.
Yeah, sounds like we're essentially from the same camp 💪 ⭐ 🙌
http://perpetual.education is a design/programming school. We like to be part of the discussion over here at Dev.to / We have time-slots for free conversations for career advice IRL : )
Yeah. We definitely have our own CSS rules and things we use on every project. But it's not really a 'framework' - and more of just some structural conventions. Our biggest problem is really just how the markup looks and the entire methodology of adding style by way of HTML. .pull-left type classes don't really make sense anymore.
So if you learn to use CSS utilities whether Tailwind, Tachyons, or others, you have to learn a DSL. On top of that, to really make these things control your stuff you DO still need to understand mostly CSS itself. So 2 languages.
I could say, "then why not inline styles using real CSS"? The main reason is TW et al do put the values on a scale e.g. it "protects you" from using inconsistent spacing or 50 shades of grey as they say. But gee, is it really that hard to come up with a sensible system yourself?
Ok, another thing is TW now prunes unused classes. Pretty killer feature.
I also understand "fighting" prebaked framework component argument.
But, I really would like folks to dig into these frameworks and CSS itself a bit more. I mean, I pretty much have to use BS at work because it was decided before I showed up. One of the first things I did was replace the href="path/to/all/of/bootstrap.css with a scss module import copied from https://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss (we're using scss so I can do this) and commented out anything unused. Then, I learn from their ideas.
Now mind you, away from job after hours I work on my own AgnosticUI framework, also write lots of custom CSS scripts, etc. Folks should be doing both! Same with JavaScript. Use more frameworks not less. Write more of your own platform based JavaScript. Then go and compare. What's amazing that the framework author did that you hadn't thought about? What's silly? Great learning resource.
For AgnosticUI, I always go look at a half dozen implementations in the wild from the big frameworks just to see if I forgot something. For example, "Hrm, why are they using this aria role here? Wait what even is that...I should google it or check MDN". Then I learn. Sometimes, wouldn't you know it, they implemented a11y wrong. Then I can feel smug for a few seconds haha. But other times I'm like "damn, I didn't even know -- good thing I didn't just release this. I would have F'd up accessibility".
Last thing. I see your example and I think -- there are broadly 3 types of CSS style:
CSS utilities (shown)
structure based CSS (shown and your preferred example)
Class chaining, SMACSS etc. (not shown. pretty much Bootstrap uses this as does AgnosticUI and many others. It can use BEM too. Same general idea)
So, style number 2 will always look the cleanest and you can cheer about "look, no classitis". If I was to code for my personal blog, a marketing site, etc., this would work great, and I agree it's cleanest markup. But, style 3 is better and more flexible for larger projects, bigger teams where the CSS skills fluctuate greatly and lots of painful CSS regressions occur, etc.
For style number 1, I feel I must admit that I'm biased against this style but I also have to admit it's very popular and in use by many shops successfully. I've heard there are issues with parallelism having all this in your markup, debug'ability, etc. But I gravitate to "against it" arguments because of my bias. It's viable and smart folks are doing it.
I've come to start using style 2 with sprinkles of CSS utilities for things like flexbox and type when I absolutely know: 1) I'm definitely going to use the heck out of these utilities 2) I'm not going to create many of 'em because it would explode my generated CSS and I don't have some smart JIT pruning engine.
We need to stay flexible, keep learning, and use discretion 💪 ⭐ 🍰
Yep. That is exactly it. People just don't want to learn CSS. Companies have imbued an interest into our industry that only things that are programmatical in nature are valid (which they are, if your only interest is to cut expenses and make more money). But HTML, CSS and even JavaScript (in the context of a scripting language) were never made for "Programmers", they were made for everyone.
100% agree. CSS is in a very good place right now, especially with grid and flexbox, and with custom properties that can be manipulated with JS. CSS is VERY GOOD.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
It's 2020. These are all THE WORST. Seriously. This list should be called "the best ways to write CSS for those who are absolutely terrified to even try to learn CSS." Or "The best ways to write the worst markup."
CSS Framework users: explain yourselves.
It's not your fault. This a great list. Good research! But - these are all just sidestepping an absolute truth - that CSS is just AMAZING now / and you don't need all this crap.
JUST LEARN CSS - on the discord
Almost all layout comes down to a few lines of code
Baby talk for computers
Exploring a tailwind component
Are developers jerks (are we jerks?)
"37 and a half ways to avoid just learning a simple declarative language"
We're pushing "like" on this post - because we think the work you put into it is A+ / but if we could put a 💩x20 on the 'frameworks' vs CSS / we would.
(added this example)
Which one of these is readable?
But if you don't want to learn CSS - then maybe frameworks are helpful? / but also if they are sooo fast and helpful - hopefully you don't bill by the hour - because doesn't that mean you'll be out of a job in the near future? Or is it the opposite?
While I agree with the general sentiment that most frameworks suck, a handful of them are actually useful and save time (If you are an experienced developer, I am sure you are saving snippets or bootstrap files of your own to try and reduce the amount of repetition in every project. So you're writing your own framework in one way or another).
That said, lightweight and simple frameworks (written in pure CSS with no compilation required) are always the way to go. Devs should stay away from the monster frameworks that are like using a sledgehammer to put in a nail.
Please, stop lying to yourself. "writing your own framework" is miles away from using a pre-made one that fits all needs (but yours, really).
A framework would never be "written in pure CSS" anyway, that would be a nightmare to maintain. You might only have access to a monolithic, pre-compiled and non configurable version of it, but it doesn't make it simpler. I would even tend to say it's worse as you can't customise it to your needs (if such a thing really exists).
Here are some pure CSS frameworks that spring to mind:
Those frameworks use just a single uncompiled CSS stylesheet, so they require only 1 extra request to load, and they are extremely easy to customise (some of them use a handful of CSS variables to change the entire appearance). To me that's not much of a big deal.
If you want to go one step further, you can use a classless framework, requiring zero modification to HTML code: github.com/troxler/awesome-css-fra....
I wouldn't call a classless framework a "framework", it's just an opinionated CSS reset.
Google defines a framework as: "a basic structure underlying a system, concept, or text." or "an essential supporting structure of a building, vehicle, or object."
CSS Resets are actually frameworks by that definition: github.com/troxler/awesome-css-fra...
Many experienced developers hear the word "framework" and freak out - without really considering that there are some really useful, extremely lightweight systems out there that are helpful and fully customisable. Of course, no one is forcing you to use them, but you'll find Normalize.css on many websites for a very good reason - it's handy and it saves time.
A framework that doesn't save you time is worthless, I 100% agree with that. But I don't agree with the kneejerk reaction that "All frameworks suck!"
Yeah. I guess we're just kinda mad that bootstrap create 50 billions "why doesn't my CSS work" questions across the internet. It's OK. We don't have to agree. You are correct. Everything is a framework.
If it was included the right way, Normalize should be invisible from the final CSS output tho. Either you merge it manually with your own declarations or you merge selectors with some PostCSS (although not recommended as this would potentially change the order of things). Another reason not to just throw some stuff and make an extra http call for things that you would rewrite anyway when writing your own custom CSS. Being able to tell it's used on many websites tells a lot about how much the devs responsible for them care about performance and optimisation.
Call me an old fart if you want but after close to 20 years of CSS I'm yet to find a CSS (not talking about JS here) framework that makes your life easier AND doesn't impact performance.
Thibaut, you should look at AgnosticUI. It does not use PostCSS, Sass, or nada. It's platform CSS. The methodology is essentially SMACSS (although I don't adhere closely; Bootstrap's style is similar with its class chaining). AgnosticUI -- look it up. It's certainly a framework, I am biased but believe it's quite maintainable.
Regarding impacting performance I generally have to agree but with the caveat that I believe it's generally because folks should be more creative in how they use frameworks! First off: at least do yourself a favor and only import modules you're actually using! Second: if you're not worried about being "upgrade safe", steal my buttons and prune the styles you're not using. I spent a lot of time getting them right and will have many bug fixes. Just take my CSS and craft it to your liking. Why reinvent the wheel completely from scratch? Leverage my pain 😄 -- I have to believe you do this anyway. Don't all us "old farts" to some degree.
But for performance, just measure and prune and use discretion. And tell the youngin's to "go learn CSS!" 💪 🍰 ⭐ 🙌
You’re preaching to the choir. What you’ve done is some kind of universal atomic design system. I created one for the company I currently work for and it just saves so much time. The amount of work to get it up to speed is not trivial, and requires deep CSS knowledge, but once you have it running, it’s pretty much like building with LEGO. You don’t have to learn the 150 utility classes from a framework - most of them only emulating inline CSS anyway - and can’t really mess it up as the correct markup is also ready to go. LEGO vs “here’s a blank canvas and a bunch of paint buckets”
Yeah, sounds like we're pretty aligned on design systems aka universal component libraries (I like the atomic part though. Nice touch!).
Yes, it's not trivial to actually get these things done. I think companies are questing the ROI and it's a touchy dance with the stakeholders. I did one for ethos.com and basically before I was even to a place I felt even close to finished I was pulled off the design system to pound out more features. At some point I was asked "hey, who's managing the goals of the design system" and I'm like, wth, y'all took me off of that for your super urgent project. I bet you can relate to this reality too huh Thibaut.
If I'm super honest, I've started AgnosticUI as a survival mechanism so I can show up at a similar job with a more or less complete system that I know and feel good about in terms of a11y, code quality, etc., and I can get something branded in a month or two. Otherwise, yes, it probably takes a year to build a complete system full time dedicated very experienced developer with not just JavaScript skills, but good solid HTML and CSS and a11y skills.
Yeah, I agree. I call this having to learn a DSL (domain specific language) + CSS. You can't really use a CSS utility library effectively in the first place if you don't know CSS. The only thing I'd admit a utility gives you is decent values perhaps. But yeah, I'm in your boat and just can't see myself doing anything but prototypes this way. Bootstrap 5 has a fair set of utilities and my colleagues have pretty much made certain sections look like we're using Tachyons or TW and then we have like 15 off canvas drawers and have some crucial
h100nested code and forget it in one place and I'm hunting down the bug lol.Yeah, sounds like we're essentially from the same camp 💪 ⭐ 🙌
A whole handful? 😉
Yeah. We definitely have our own CSS rules and things we use on every project. But it's not really a 'framework' - and more of just some structural conventions. Our biggest problem is really just how the markup looks and the entire methodology of adding style by way of HTML.
.pull-lefttype classes don't really make sense anymore.So if you learn to use CSS utilities whether Tailwind, Tachyons, or others, you have to learn a DSL. On top of that, to really make these things control your stuff you DO still need to understand mostly CSS itself. So 2 languages.
I could say, "then why not inline styles using real CSS"? The main reason is TW et al do put the values on a scale e.g. it "protects you" from using inconsistent spacing or 50 shades of grey as they say. But gee, is it really that hard to come up with a sensible system yourself?
Ok, another thing is TW now prunes unused classes. Pretty killer feature.
I also understand "fighting" prebaked framework component argument.
But, I really would like folks to dig into these frameworks and CSS itself a bit more. I mean, I pretty much have to use BS at work because it was decided before I showed up. One of the first things I did was replace the
href="path/to/all/of/bootstrap.csswith a scss module import copied fromhttps://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss(we're using scss so I can do this) and commented out anything unused. Then, I learn from their ideas.Now mind you, away from job after hours I work on my own AgnosticUI framework, also write lots of custom CSS scripts, etc. Folks should be doing both! Same with JavaScript. Use more frameworks not less. Write more of your own platform based JavaScript. Then go and compare. What's amazing that the framework author did that you hadn't thought about? What's silly? Great learning resource.
For AgnosticUI, I always go look at a half dozen implementations in the wild from the big frameworks just to see if I forgot something. For example, "Hrm, why are they using this aria role here? Wait what even is that...I should google it or check MDN". Then I learn. Sometimes, wouldn't you know it, they implemented a11y wrong. Then I can feel smug for a few seconds haha. But other times I'm like "damn, I didn't even know -- good thing I didn't just release this. I would have F'd up accessibility".
Last thing. I see your example and I think -- there are broadly 3 types of CSS style:
So, style number 2 will always look the cleanest and you can cheer about "look, no classitis". If I was to code for my personal blog, a marketing site, etc., this would work great, and I agree it's cleanest markup. But, style 3 is better and more flexible for larger projects, bigger teams where the CSS skills fluctuate greatly and lots of painful CSS regressions occur, etc.
For style number 1, I feel I must admit that I'm biased against this style but I also have to admit it's very popular and in use by many shops successfully. I've heard there are issues with parallelism having all this in your markup, debug'ability, etc. But I gravitate to "against it" arguments because of my bias. It's viable and smart folks are doing it.
I've come to start using style 2 with sprinkles of CSS utilities for things like flexbox and type when I absolutely know: 1) I'm definitely going to use the heck out of these utilities 2) I'm not going to create many of 'em because it would explode my generated CSS and I don't have some smart JIT pruning engine.
We need to stay flexible, keep learning, and use discretion 💪 ⭐ 🍰
Yep. That is exactly it. People just don't want to learn CSS. Companies have imbued an interest into our industry that only things that are programmatical in nature are valid (which they are, if your only interest is to cut expenses and make more money). But HTML, CSS and even JavaScript (in the context of a scripting language) were never made for "Programmers", they were made for everyone.
100% agree. CSS is in a very good place right now, especially with grid and flexbox, and with custom properties that can be manipulated with JS. CSS is VERY GOOD.