Yes, but the 40 lines of CSS puts the logic in the right place.
The point is that a person reading system logic shouldn't need to be distracted by layout, and a person worried about styling shouldn't need to think about code.
Whether that matters depends on the specific system and the types of abstractions used, but it can be very important to making code maintainable, and in some cases, org structures practical (where the team maintaining the CSS might not be the same as the team maintaining the system logic).
The big thing you didn't mention is accessibility. Unless you know exactly what you're doing, just a few lines of javascript will let you break a user interface in so many subtle ways.
All the examples in this blog post use CSS to implement the functionality of the widget, not just appearance of them. By your own reasoning, that should be handled by JS, not CSS
Javascript on the frontend is not for "systems" logic, it's for small changes to the layout without reloading the page. This myth that HTML, CSS and JS are all separate "systems" that need to be isolated has to die.
JavaScript on the frontend is not intended for "small changes to the layout without reloading the page", it's intended for changes to content. CSS is one of the tools intended to manage layout and appearance.
Is it possible to use one for the other? Of course.
It’s a web browser. You program it in whatever way you like that you enjoy that makes sense to you.
Use whatever approach you need to get the job done. Mix and match. Come up with new ways. Do it simple. Do it sophisticated. Combine JS and CSS. It’s all valid.
Don’t listen to people who try to tell you how to program.
> Don’t listen to people who try to tell you how to program.
This worked for me:
* DO listen to people who tell you how to program
* Listen to many types of them (Microsoft programmers, functional programmers, Unix systems wizards, digital logic designers, UX designers, etc.)
* Do what they tell you for at least long enough to understand why they're telling you what they're telling you to do. This requires a very open mind. A Unix programmer stepping into a Microsoft shop or vice-versa will find many things which go against their most core values.
* Understand the underlying, fundamental, first principles their best practices derive from (keeping in mind some of those first principles are incorrect -- especially within the Microsoft community), and different ways people have figured out how to structure code, the upsides and downsides of each, and how they mix-and-match.
* From then on, program from first principles when you have time, from best practices when you don't, and quick-and-dirty hacks when you really don't, or are just having fun.
JS for UI is wrong, because there will be FOUC, and if you preload JS, the page will be slower. Of course, if something is impossible with CSS, JS is fine.
Yeah, the 90% of web apps whose UI is broken, I don't understand them. Haven't we all seen multimillion $ airline mega web apps that can't present a decent form?
But it's also too often broken, fragile, and the worst sin of all, break default behaviours of browsers. It is the price we pay for html having been stale for 15 years between the late 90s and 2012-ish.
As a mostly backend guy that's the case most of the time for me.
I never really got my head around the correct way to think in CSS.
I am at the "I can see numerous ways of doing this" but I never really know the standard or best way to do it. It was the same when I started doing web dev / Django stuff, whereas now, with years of experience, I do know the best way to approach a problem, to keep code minimal and clean and readable.
(If anyone can suggest some tutorials that get me past that stag with CSS I would grateful).
The correct way to think in CSS is to think in HTML, which has the functionality we need (like a checkbox etc) and CSS is an enhancement on top of it. Ditto JS.
Of those 40 lines, many are styling to create the look of the switch in css, it could have been replaced with an image (and needed for a js solution anyway)
