Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why I Write CSS in JavaScript

mxstbr.com

Post reply on HN
Print view View original

171–180 of 255 posts

Re: Why I Write CSS in JavaScript

#171

Post by bpicolo »

FiddlyPack wrote: post #151
bpicolo wrote: post #12

CSS in JS is one place where Vue has a substantially better experience. Being able to toss scoped-css, written as normal in a css block is what I call nailing the developer experience. It is all the best parts of css in js with none of the downsides.

Angular also does this, fwiw. Also allows you to manipulate the styles from DevTools which I hear is a problem in CSS-in-JS

dev tools works fine with both react and Vue if you set it up well, meaning to extract css to a file instead of throw it inline. Most setups extract to a file

Re: Why I Write CSS in JavaScript

#172

Post by allover »

jmull wrote: post #168
exogen wrote: 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 agree CSS has problems. What I don't see is how styles-in-JS addresses them. Very typically, for a given app and page the styles of individual elements and components are not independent . They also depend the app theme, app section, layout area, component group, etc. The element fits the component. The component fits into the section, the section fits into the page. The specific relationships in a particular case…

A lot of CSS-in-JS libraries provide a theming solution, e.g. [1], so it's not an 'either/or'.

(You can also relatively easily implement your own, because JS :))

[1] https://www.styled-components.com/docs/advanced#theming

Re: Why I Write CSS in JavaScript

#173

Post by ringaroll »

pmlnr wrote: post #166
_ea1k wrote: post #154

Earlier quoted context omitted.

That limitation is why people like the article writer often replace it with a programming language.

It's not a limitation. It's different.

Its different and it a poor lang. The only people advocating for css only are privacy freaks. They're often the least return producing customers, hence ignored.

Re: Why I Write CSS in JavaScript

#174

Post by jakelazaroff »

kowdermeister wrote: post #52
jakelazaroff wrote: post #39

Earlier quoted context omitted.

You can! I do this all the time.

With copy and paste? :)

Am I misinterpreting something? In my app that uses CSS-in-JS, if I go to the "Elements" tab of my browser developer tools and select an element, I have the option to inspect, add, remove and change styles — including using the color picker and bézier curve editor — and have it reflected live on the page.

Re: Why I Write CSS in JavaScript

#175

Post by itslennysfault »

exogen wrote: 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 heavenly and I haven't thought about conflicting selectors in years.

Re: Why I Write CSS in JavaScript

#176

Post by gnulinux »

exogen wrote: 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…

Emacs lisp is pretty much like that. Nowadays it does support semantic scoping but lexical scoping is still very useful.

Re: Why I Write CSS in JavaScript

#177

Post by tokyodude »

exogen wrote: 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…

Not a solution for CSS I guess but if I was using a programming language that had only global variables I'd write a compiler to generate variable names.

Re: Why I Write CSS in JavaScript

#179

Post by smrq »

tokyodude wrote: post #177
exogen wrote: 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…

Not a solution for CSS I guess but if I was using a programming language that had only global variables I'd write a compiler to generate variable names.

It is a solution for CSS, and it's called CSS Modules.

Re: Why I Write CSS in JavaScript

#180

Post by jmull »

allover wrote: post #172
jmull wrote: post #168

Earlier quoted context omitted.

I agree CSS has problems. What I don't see is how styles-in-JS addresses them. Very typically, for a given app and page the styles of individual elements and components are not independent . They also depend the app theme, app section, layout area, component group, etc. The element fits the component. The component fits into the section, the section fits into the page. The specific relationships in a particular case…

A lot of CSS-in-JS libraries provide a theming solution, e.g. [1], so it's not an 'either/or'. (You can also relatively easily implement your own, because JS :)) [1] https://www.styled-components.com/docs/advanced#theming

Sure.

My point is, when it comes to visual styling, you inherently have a shared visual context.

The post I was replying to was concerned with the "global" nature of CSS.

I'm pointing out that this is inherent to the problem space. You have to deal with it whether you use CSS, code or any other mechanism to style.

Post reply on HN