Live data from Hacker News

Why I Write CSS in JavaScript

mxstbr.com

191–200 of 255 posts

Re: Why I Write CSS in JavaScript

#191
post #128

Imagine a programming language that only had global variables. You have to carefully name your variables using complicated conventions in order to avoid any conflicts or unexpected behavior. Even your functions don't have local variables; there is no lexical scoping. Any function can overwrite or mutate what any other function is doing inside. There is no real encapsulation. After you've done this perfectly, your app…

I don't entirely understand why some people find CSS so difficult to work with. I agree that it has its own challenges, but solutions generally aren't very complex. Global selectors ("variables") collisions? Use namespacing. Specificity is convoluted? Simplify by using only non-nested classes. Does the annoyance primarily center around the fact that styles cascade to child elements? Hard to tell from the article.

Good software is reusable. I can import functions from 1,000,000 different npm modules all into my project and they don't fuck with each other, right?

Let's say you wanted to pull in a button from Bootstrap for one part of your page, a button from Material UI elsewhere, a button from Semantic UI elsewhere, etc.

These things are made to be reusable right?

What are the chances you can do that without issues? Do you think any of their style rules/selectors would clobber each other? What about the base/assumed CSS that they all most likely require? What about components more complicated than a button? Without actually trying it, how much confidence do you have in your guess, vs. your assumptions about importing other things (like functions from npm modules)?

Good software is reusable without worry.

Re: Why I Write CSS in JavaScript

#193
post #128

Imagine a programming language that only had global variables. You have to carefully name your variables using complicated conventions in order to avoid any conflicts or unexpected behavior. Even your functions don't have local variables; there is no lexical scoping. Any function can overwrite or mutate what any other function is doing inside. There is no real encapsulation. After you've done this perfectly, your app…

This is the goal of Web Components / Shadow DOM. Angular implements a polyfill for this. Every angular component has 3 files html, ts, (s)css, and the styles in the components css file are automatically scoped to just the component they apply to. It takes away all the stress of global css selectors, and if you want to share styles you can just have a library of shared styles and import them via scss. It's honestly he…

I'm aware and agree, and it also – even if less so than other solutions like Styled Components – counts as CSS-in-JS. So welcome to enjoying CSS-in-JS :)

Re: Why I Write CSS in JavaScript

#194
post #188

Earlier quoted context omitted.

Isn't CSS (with HTML) Turing complete?

As far as I know, Turing completeness isn't essential for being considered a programming language. SQL is one, HTML too. They both tell a computer what to do.

HTML is not a programming language, it's a markup language. And SQL is Turing complete.

Re: Why I Write CSS in JavaScript

#195
post #132
post #128

Imagine a programming language that only had global variables. You have to carefully name your variables using complicated conventions in order to avoid any conflicts or unexpected behavior. Even your functions don't have local variables; there is no lexical scoping. Any function can overwrite or mutate what any other function is doing inside. There is no real encapsulation. After you've done this perfectly, your app…

CSS is not a programming language, and it shouldn't be viewed or compared as one. It has different functionalities.

I don't know. I've seen people do some crazy things with pure CSS that look quite a bit like programming.

Re: Why I Write CSS in JavaScript

#196
post #191

Earlier quoted context omitted.

I don't entirely understand why some people find CSS so difficult to work with. I agree that it has its own challenges, but solutions generally aren't very complex. Global selectors ("variables") collisions? Use namespacing. Specificity is convoluted? Simplify by using only non-nested classes. Does the annoyance primarily center around the fact that styles cascade to child elements? Hard to tell from the article.

Good software is reusable. I can import functions from 1,000,000 different npm modules all into my project and they don't fuck with each other, right? Let's say you wanted to pull in a button from Bootstrap for one part of your page, a button from Material UI elsewhere, a button from Semantic UI elsewhere, etc. These things are made to be reusable right? What are the chances you can do that without issues? Do you thi…

> Good software is reusable. I can import functions from 1,000,000 different npm modules all into my project and they don't fuck with each other, right?

I just spent the whole day trying to fix compatibility issues between different versions of npm libraries transitively imported in a project. Reusability in JS is a joke.

Re: Why I Write CSS in JavaScript

#197
post #128

Imagine a programming language that only had global variables. You have to carefully name your variables using complicated conventions in order to avoid any conflicts or unexpected behavior. Even your functions don't have local variables; there is no lexical scoping. Any function can overwrite or mutate what any other function is doing inside. There is no real encapsulation. After you've done this perfectly, your app…

This is sad. All because people are not able to think of one simple prefix and stick with it when naming CSS classes. How hard can it be? Just use some part or abbreviation of the company name and be done with it. Or better yet: Let third party do that. I always hated that, when someone used Bootstrap on a website and Bootstrap f'ed up all future styling, by assuming it was the only one player in the game. So stupid.

I personally never ever ran into any problem, when I myself named CSS classes and that is because I automatically think about the future and whether a name could conflict with something else, instead of being lazy and typing 3 characters and thinking I did my job. I am simply careful and use prefixes and give unique names, so that it has such a low chance of someone else using that CSS class name, that it simply never happened in practice. So from my personal experience all that mumbo-jumbo about CSS name collisions comes from people not being careful and is a "house made" problem, not a problem of CSS. I never had any need to use JS to do what is CSS's job.

Using JS for doing something CSS should do is furthermore dangerous, since clever people deactivate their JS or block it partially. For me personally, your (not you personally, but you in general, anyone who reads this) JS better comes from your own domain, or it will be blocked by default. If you can live with people seeing your website utterly destroyed by its inability to apply style, then OK, do the styling in JS.

Re: Why I Write CSS in JavaScript

#198
post #128

Imagine a programming language that only had global variables. You have to carefully name your variables using complicated conventions in order to avoid any conflicts or unexpected behavior. Even your functions don't have local variables; there is no lexical scoping. Any function can overwrite or mutate what any other function is doing inside. There is no real encapsulation. After you've done this perfectly, your app…

CSS isn't a programming language, that is the fundamental difference and explains a LOT of the debate surrounding it.

And HTML is a markup language for hypertext, a document rather than an application.

But it turns out that we're using it and CSS and JavaScript to build full blown applications. So, because we're trying to solve problems with applications rather than documents, we have to map the problems of application programming onto it.

So, to build an application, we run into problems CSS wasn't designed to solve (being a not-programming language.) Whether it is or isn't a programming language is irrelevant - to solve our problems (writing applications), we have to treat it as if it is.

Re: Why I Write CSS in JavaScript

#199
post #188

Earlier quoted context omitted.

As far as I know, Turing completeness isn't essential for being considered a programming language. SQL is one, HTML too. They both tell a computer what to do.

HTML is not a programming language, it's a markup language. And SQL is Turing complete.

Coq is a good example of a non-Turing complete programming language.

Re: Why I Write CSS in JavaScript

#200
post #191

Earlier quoted context omitted.

Good software is reusable. I can import functions from 1,000,000 different npm modules all into my project and they don't fuck with each other, right? Let's say you wanted to pull in a button from Bootstrap for one part of your page, a button from Material UI elsewhere, a button from Semantic UI elsewhere, etc. These things are made to be reusable right? What are the chances you can do that without issues? Do you thi…

> Good software is reusable. I can import functions from 1,000,000 different npm modules all into my project and they don't fuck with each other, right? I just spent the whole day trying to fix compatibility issues between different versions of npm libraries transitively imported in a project. Reusability in JS is a joke.

What dependency system anywhere on earth is free of the problem of "two things require different versions of the same library"? I don't see the relation to JS at all.

I've had this problem with JavaScript-before-npm-existed, Python, apt, Homebrew, Portage...

Post reply on HN