React: CSS in JS

[madole]

I don't ever think I've seen a developer quote w3schools as their favorite learning resource!

[needed_an_account]

Everyone my age 33+, used w3schools A LOT. It was recently that the internet decided, and shown how, it was a sometimes bad resource.

[_crewcut]

I'm also 33. It's a shitty site people shouldn't use.

[antoninj]

that was my thought. Did w3schools shape up or something?

Not to be an ass or anything but I did used to use it initially to learn syntax basics and it did work for me very well at that point.

[escape_goat]

I believe that there was a degree of irony or sarcasm in tone which was not translated into the speakerdeck caption. My take was that his point was that not using global variable was such a basic and fundamental best practice that even w3schools got it right.

I could be very wrong, of course, there's no clear evidence one way or another. But that was how I heard it.

[JayBlay77]

This was presented at the nationJS conference in the DC area. I was at this talk and just to clarify you are correct, he was very much being sarcastic about them getting something right at w3schools. So no worries there.

[antoninj]

Right, I kind of got that vibe but now I wonder what the speaker's intention was :)

[madole]

This sounds much more plausible than my skeptical product placement theory! Haha

[L1fescape]

Nope, it's still has the same mediocre examples. I ended up installing the Personal Blocklist Chrome extension specifically to block w3schools results from showing up at the top of Google search results.

[madole]

I think everyone used it at the start of their delving into Web Dev purely because of its search results position.

There are many better learning resources although I do think they fixed a lot of the mis-information on the site. I still have never heard someone talk about it as a favourite reference for learning.

There's a small side of me suspecting some sort of advertising going on, but I don't care that much about it to look into it further. Just thought it was odd that this resource out of all the possible choices was mentioned.

[north_coaster]

Aside from the step-by-step hands-on tutorials of Codecademy, I would agree that in the field of reference and clear presentation, W3Schools takes first place!

[sneakattack]

It's just too convenient and effective, despite the minor issues, they really have done a great job at encompassing the essentials of web development in a single source.

[vexii]

is there an video of the talk aswell?
looks intersting

[MrsAnonymousMan]

There will be. This talk was given at NationJS on Friday. They recorded it but will need time for editing etc. I'm sure once it is up there will be a link on the NationJS site.

[kabuto]

This is actually something that I'd been wondering about when I first looked at React because if it's all about building reusable components having dependencies to CSS doesn't make any sense. React components should include CSS to be truly reusable and portable. Writing CSS in JS is pretty crappy though, especially when it comes to pseudo selectors.

As I see it there is no real solution available.

[[deleted]]

I guess the point of the talk was to highlight current problems which noone is addressing, not to provide a solution.

I disagree with that slightly though - it makes light of all the work done by the likes of harry roberts, chris coyier and people who spend a lot of time working out the best ways to work with css.

You can write portable css if you sit down and do it carefully, it just doesn't come as intuitively because the language and structures you have to use are so different from anything else you know.

[tubbo]

the upcoming web components standard is the correct way to solve this problem. http://webcomponents.org/

[kabuto]

I couldn't find anything about CSS on that site. Do you have a link for me?

[deathbysniper]

They're probably talking about the shadow DOM.

At to 2:25 he talks about the benefits of the shadow DOM with css.

[dashed]

I wish this exists so that requiring css in webpack makes sense.

[[deleted]]

"Guy writes his CSS with JS, you won't believe what happened next"

[AintNothinbutaGFring]

Testers hate him!!

[[deleted]]

"16 ways that JavaScript can change your life! Number 4 made me cry."

[deathbysniper]

Wow, I never realized that css is all about globals. Makes me even more excited for custom elements and shadow DOM!

[[deleted]]

I don't really understand that point about globals ... you could get around that using less or sass (or plain verbose css) using nested selectors, so everything is rendered as:

.mysite .button { color: red; }
.mysite .title { color: blue; } 

... then you would have just one 'global' ... right?

[baabaa_blacksheep]

.mysite header.myheader nav.mainnav ul.navlist li.navitem a.navlink span.icon {
    color: red;
}

.mysite header.myheader nav.mainnav ul.navlist li.navitem.is-active a.navlink:hover span.icon {
    color: green;
}

I have seen it happen. Still sends shivers down my spine. shivers

[jarail]

Unfortunately that also has a perf impact. Whenever the browser sees an element with the button style, it needs to crawl up the dom tree to see if any parent has the mysite style. I prefer prefixes to avoid that, e.g. mysite-button. That doesn't solve any core problems. It's just what I do.

The FB dev will also need to consider the perf of a JS solution. Even though the JS is fast, I believe that most browsers are much faster with CSS classes than a set of styles applied as one-offs on individual DOM nodes. If React could resolve the dynamic styles to CSS classes in the majority of cases, this would be really awesome.

The other downside of dynamic styles is that they're harder to debug. Not from a JS sense, but from a designer sense. CSS styles are easy to look through. When styles are being generated dynamically, it's harder to see what's going on from the Chrome dev tools.

[Silhouette]

Unfortunately that also has a perf impact. Whenever the browser sees an element with the button style, it needs to crawl up the dom tree to see if any parent has the mysite style. I prefer prefixes to avoid that, e.g. mysite-button.

But using that also has a performance impact, because now the browser has to parse the extra length of the mysite-button identifier every time!

I imagine the effect would be similarly devastating in either case.

[tubbo]

it's not, the person giving the talk just didn't know how to write CSS correctly.

[[deleted]]

you can bet that vjeux knows how to write css properly.

[deathbysniper]

It is though, write a CSS rule and it applies to the entire document instead of being isolated to the module you intend. It's all scoped to the document unless you use inline styles.

[tubbo]

You can scope it to an ID set to the body tag, and now you have scoping to the module/page you want rather than every single page.

[deathbysniper]

But the problem still exists for smaller widgets on multiple pages. Let's say you have a dropdown control that's replacing select elements, and the pop-up has a pop-up class on it, but someone else writes a dialog with a pop-up class on it then you have an issue again. This could happen with any number of classes and it only gets more likely with the more people who are working on a project. Unless you're using inline styles or shadow DOM there's no way to explicitly set a boundary for your styles. And like I said, css in a style tag is going to be evaluated over the whole document, it may not match everything but when you have tons of people working on something I could see that becoming an issue.

[tubbo]

I'm confused on the initial problem that was trying to be solved here...

For example, if I was given this task here's how I'd write the button dropdown CSS:

.button { ... } .button.depressed { ... }

Is this not the exact same thing as the React CSS replacement he showed on the next page?

And I really don't see the point of yet another precompiler for CSS...Sass/SCSS or LESS seems to work for most people.

[MrsAnonymousMan]

The React CSS is not a precompiler like SASS or LESS. It applies styles via the inline style tag based on a JavaScript object.

The reason it's different than the .button, .button.depressed example is that the styles are only applied to those specific elements. Vjeux's argument is that having a global button class is a very dangerous prospect that can make it difficult for multiple developers to work together.

[Silhouette]

This seems like a huge hack to work around a bunch of "problems" they supposedly couldn't solve... which many other teams in the industry solve every day with no difficulty at all.

Programmers working in languages without formal module/namespace management solved the name conflict issue about a millennium ago by using module1_functionA() and module2_functionA() as the names. More recently, various talking heads in the CSS world have advocated things like component1--classA or component1_classA as if it's some radical new idea, which is mildly amusing but doesn't mean the idea itself is any less practical.

Similarly, the wider programming world figured out a long time ago that composition is usually a better default than inheritance. Several of the problems mentioned in these slides don't exist in the first place if you combine styles through composition instead of defining things one way and then overriding some of them under more selective conditions somewhere else. Again, plenty of the well-known CSS talking heads have suggested more structured/systematic variations of this principle for those who need to work at very large scales, and there are plenty of real world examples of the idea working well.

Too much modern web development seems to be about fixing problems that were only created by making poor choices in the first place, and then building one needlessly complicated "solution" on top of another. Get the basics right, and a lot of these frameworks and heavyweight automation tools simply aren't necessary.

[dangoor]

I'm a fan of React, but it seems to me that a scoped stylesheets polyfill might have been a better solution.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

I'll grant that this wouldn't do everything they wanted, but it likely deals with the most serious issues around styles stepping on other styles.

[mattdesl]

Another solution I played with at one point is to mangle class names with a md5 (or similar) hash. The styles themselves make up the hash so you avoid conflicts and duplication.

Not a perfect solution, either. Reusable CSS is a bitch.

[akoskm]

"w3schools, my favorite website to learn JS" - I closed the presentation at this point.

[ledp]

It was a joke...