The Creator of CSS Shares His Opinion on CSS-in-JS
Вставка
- Опубліковано 11 чер 2024
- What does the creator of CSS, Håkon Wium Lie, really think about CSS-in-JS? As someone who has played a pivotal role in shaping the way we style websites, Håkon offers a unique perspective on this much discussed topic. Against or pro? Watch the video to find out!
00:00 Opinion on CSS-in-JS
00:50 Opinion on frameworks
01:30 CSS has taken things from JS
02:03 Advice
Check out the home for untold developer stories around open source, careers and all the other cool stuff developers are doing at cult.honeypot.io.
Honeypot is a developer-focused job platform, on a mission to get developers great jobs. Wanna see what we're all about? Visit honeypot.io to find a job you love.
To learn more about Honeypot: bit.ly/3HFVum2
Follow Håkon Wium Lie:
Website: www.wiumlie.no/en
Twitter: / wiumlie
Follow us:
Twitter: / honeypotio
Facebook: / honeypotio
LinkedIn: / honeypotio
Instagram: / honeypot.cult - Наука та технологія
The title is misleading... He didn't say anything on CSS-in-JS, he meant the JS frameworks
he did say... ur deaf
There's a difference between "CSS-in-JS" which is a specific paradigm and "doing CSS in JS" which is what he talked about. I agree with OP, the title is misleading.
yeah I was waiting for him to talk about css-in-js but then the video finished
@@isaacabrahamson9325 So is "CSS-in-JS" actually a thing, then? Besides JS frameworks
‘Maybe some of them should’. ❤ thanks for suggestion
I always prefer to use CSS and then JS as complimentary. I feel we have gone overboard with JS and now are over enginering
You don't feel. You know.
@@Romogi haha you are right😂
Well, core to his point… if you _do_ need a framework. Svelte is a strong competitor here. Very strong on HTML and CSS, the JS is fairly simple and the end result is a very small (compiled) pure JS package with CSS shipped alongside. Features go up from there.
Feels like many Programmers are alergic to learning css.
Feels like many programmers are alergic to learning…
@@IsawUno I’ve been learning in many different facets of programming… python, JavaScript, the basics of Java, have learned a bit of Swift & Go, but not really my favorites, learning React & components at the moment… going deeper into understand the DOM and am overall decent with HTML… CSS feels more artistic than classic programming… JavaScript is the most alluring, html is the structure, and css historically just made things look nice… which is valuable, but unless you are either art or business oriented, not as popular as traditional programming… whether it’s data, time, networking, gaming… languages like Python & JavaScript the 98% of what programming is used for
I am also curious about this. I don't know why. What i think, maybe a lot of developer/programmer here can't do designing/drawing stuff, they love about the Data.
I even appreciate more CSS when i have to develop an Android app natively, because Google is too emphasizing us to use their "Material" component, still we can create our custom component, but it is difficult rather than all about the styling itself can be done in CSS declaratively.
Because it's annoying af.
It's great that there's a tool for making UIs look nice, but it's terrible to have to think about UIs to begin with, and even more so to have to do it with a rather complicated language.
CSS is powerful but if you're not into design it's just a chore.
I like beautiful user interfaces but I hate CSS, I think it's because of the ambiguity of the language , too many tips and ways to do the same thing
I see so many developers just get frustrated with HTML/CSS and resort to JavaScript. The issue with HTML/CSS is there are so many ways to do something, so much 'new' stuff added after creation, so much inconsistent, confusing, and unintuitive ways of doing something that sites often don't work properly. I've seen people resort back to tables because flex doesn't work 'correctly' -- or more specifically it takes less time to recode the site using a table than figuring grid or flex out or dealing with some quirk you can't deal with. I've also seen folks just use JS to calculate the height of something because they don't have an hour to figure out why calc() doesn't work correctly or won't fire on a size change, etc., etc.
Now, you can say we need better CSS folks -- and I've certainly 'corrected' folks HTML code. However, the sad fact is that it's gotten so complex that JavaScript is often just 'simpler' -- even for trivial things.
I can relate to this comment somehow. I am making two versions of a website one node js website and subdomain one as static. JS framework makes it easy and organised elements and almost never breaks the layout meanwhile the static one I have multiple tabs opened just resolving an issue then have to bother about being mobile first. Building with frameworks is more consistent while building with css might help with creativity but can be ruined easily. I had to once use the grid in flex just to resolve some weird stuff. The documentation for the framework is clear and Easy to follow.
I always thought of javascript as the technology with baggage, but I can see how CSS also does (is it "align-items: center", or "align-content: center", or "text-align: center" ... etc). And there's a lot of boilerplate to get sane defaults, so-called CSS-resets are popular for that reason. And then we have TailwindCSS, which helps to simplify some things, but every time you simplify things, the abstraction comes at a cost e.g. harder to debug.
I think this guy is on point when he says we should get more done at the base language rather than framework level. Most people forget that vanilla Html, css and JS can get the job done. Your framework compiles to JS!
Agreed, on a recent project we used FlutterFlow to build a tiny web app, but we ended up having so many issues with it, and needed to import another library called canvas Kit to fix the way it rendered fonts etc. In the end, the base app JS weighed in at 3MB! Which was unacceptable. We spent a week trying to optimise it, and only managed to shave off 200kB.
Then we decided to start from scratch, and built an identical app, hand written in vanilla HTML, CSS and JS. The resulting app then weighed in at less than 30kB, looked better and loaded instantly. I didn't even try to optimise it further. And it took less time to build than we spent on optimising the FlutterFlow code.
Needless to say, we learnt a really big lesson, and we're going to avoid most frameworks going forward.
(The app is meant to be zero rated, ie, the business pays for the data usage on the cellular network. and that's one main reason why 3MB was unacceptable.)
But he isn't sharing his opinions on css-in-js ... and we don't hear the question being asked.
I once gave Håkon a hard time because he didn't believe that CSS user agents should support the ability to report "capabilities" for the user agent. Capabilities (similar to termcap) would have prevented a ton of truly dodgy CSS hacks between 2000 and 2015 that bent over backwards to accommodate every little quirk in 20 versions of different browsers. Thankfully CSS is in quite a bit of a better place now, perhaps due to browser ACID tests?
Love it! Well said, Håkon 🙌
so, back to basics!
I agree that frameworks can make it tougher to train the basics. All the assistance and shortcuts might be helpful short term but could trip us up in the long run... But I guess AI will just be another layer on top then RIP
Any good articles/podcasts on when to use Frontend frameworks like React/Angular and when not to use them. ??
Right now, on my website I use HTML5 and CSS3. Using CSS made making my navigation near the top of my pages easier to figure out than before when I used Javascript. : - )
Hey @Honeypotio please correct to Håkon that CSS is harder than programming 😢
😂❤
Thank you team, thank you Håkon 💪🏼
😉
😂
This is pure CCS creator, he even has margin-left: 300px on his left sleave and margin-left: -300px on his right sleave
Nice, but still no pseudo selector for elements which are being wrapped in flexbox/grid container.
So you still have to calculate top offset of each children element and apply new style with JS 🙃
I always wanted to ask him why they didn't put variables and nesting into CSS from the beginning.
nesting is the thing I would love the most to see in CSS. And it doesn't even require the use of memory.
frameworks are there for people to use those effects easily, most developers are not that good at css and employers don't value the ones who are good at it at your normal small companies.
CSS already provides a great deal of abstraction. Therefore I agree that more work should be done at css/html level rather than on a framework with special constructs. IMHO though vue provides the most vanilla feel among everything.
hey honeypot im from iran. can i apply for a job and get eu visa and relocation?
I updated and wish you success. You have grit.
The video title is wrong, nothing was said about CSS-in-JS
emmmm..... I have to say this video has nothing to do with css-in-js, the creator of css just hope developer to use vanilla css
Is it not bugging anyone else that the plant pot in the background is not in the center of the base it's on?
Normally it would. I regularly go straightening picture frames etc. But it this case I think it actually balances the asymmetry of the plant well. The plant's center of mass is off to the right. So it feels fine to have it shifted a bit to the left.
@@neildutoit5177 yeahhh.. i guess so
When I look at CSS I see another soruce of consuming resources. It uses loops, like a programming language, don't see any reson why it should do so.
people be malding over this
Is this a full talk ?
We also have this video from the same talk:
ua-cam.com/video/TZfDWiwlRlE/v-deo.html ✨
@@Honeypotio Where is the full video ?
We edited it into shorter videos since we went in a few different directions!
@@Honeypotio ok
@@HoneypotioI’m used to watching longer interviews that shifted direction naturally as the conversation evolved and they’ve all been interesting. I’d be totally cool with a simpler (and loosely edited) long form video showing the full interview, personally. Would be great to watch/listen to.
I think the time of css is passing away.
CSS-in-JS should honestly be on it's way out, with SSR frameworks coming back to solve the issues that came with all the client-side view layer frameworks, like React and Vue. But here we are in 2023, and my company is deciding to add material-UI to the site and add a bunch of JS runtime with it, slowly bloating the site.
Isn’t CSS just “predefined callable routines supported by the browser”?
And isn’t Javascript just often “code that manipulates CSS”?
So in the end, it’s all programming. Just levels of customizability and public API usage.
Would love to know his thoughts on DSSSL. CSS always felt like a step backwards to me.
0:12 We should try to avoid scripting. Because scripting is programming, and programming is hard.
Stop blaming developers. You know why we use frameworks? Because companies want fast profits over reliability. It’s all about shipping it as quick as possible.
He’s just talking about learning / doing simple projects, I don’t think he’s suggesting to build complex production level software without a framework
well a framework also means that you can replace a developer or attract a new developer with knowledge of that framework and know that he/she will will be up to speed in reasonable time.
I hardly ever use JavaScript.
CSS does the trick - may God bless this man!
If writing CSS is not programming, then what is it?
Layout design. In spanish we have a more specific word: "Maquetar / Maquetación"
CSS doesn't define a behaviour, just how things look. Well there are animations, and things like hover in CSS. But none of that are consider programming.
Programming is a different level of abstraction that includes non visible data structures in memory, such as variables, arrays, etcetera.
I think solutions like Tailwind are good because it fits in the middle
It improves efficiency of writing code and reduces efficiency of reading code.
Programmers read code over 10x oftener than write it.
So add 2+2.
@@okey5818 how does it _"reduces efficiency of reading code."_
@@muslim2k Do you understand the difference between declarative and imperative programming?
HTML was designed to be declarative. So you can go to the markup and understand exactly what is the function of each element.
CSS / SCSS / Styled Components help with this identification by well-named classes / tags.
Tailwind turn declarative HTML into an imperative soup of CSS abbreviations moving us from well-designed modern programming languages back to assembly.
@OKey me personally dislike "Tailwind" for exact same thing... I am hardcore css coder. I like doing things my way (using bootstrap for grid 'cause I am lazy), because it is extremely easy to read the code and to understand what's going on. Having 20 classes on every level of div just to declare the smallest thing makes it EXTREMLY difficult to maintain. And real life projects do require maintenance. I use JS exactly how Håkon Wium explains it. Everything should be in balance. (same goes for semantic css and accessibility but that's another topic)
@@okey5818 Exactly why i don't use Tailwind. HTML already doesn't look nice to look at, specially if you have a lot of elements with a lot of attributes, and Tailwind will make even the simplest HTML look like a mess.
Tailwind SIGNIFICANTLY reduced my headaches from CSS, when I need it I use SCSS, everything else is Tailwind. It has intellisense so you don't neeed to learn much .. not at all. But .. there is no way around CSS .. I would not recommend use Tailwind someone who does not know CSS.
how can you ben against frameworks in ANY way??? even if you restrict yourself to HTML and CSS only, you're not going down and seeing what's really under there... so, i call what he says BS.
Using Frameworks have trade offs, that's what he's basically saying. When he said restrict your self to HTML and CSS he said to use JS to when you need it.
Crockford & Lie understand the ghetto “web development” has become.
ok boomer
Millennials think HTML and CSS are too difficult because they're all on ADD meds.
As a self-learning front-end developer, I don't know if I should agree with him or not🥲
ok boomer