Sarrah Vesselov: How to style in React and not lose friends | JSConf Iceland 2018
Вставка
- Опубліковано 4 кві 2018
- 2018.jsconf.is/speakers/sarra...
Aside from recent political events, I don't know of another topic sure to cause more heated debate than how you should style React components. This talk sets out to cover the main methods for styling in React (and beyond).
Through code examples, we will explore the pros and cons of just some of the methods out there. You will learn to make styling decisions based on the scale and type of project. By the end, you should feel confident that there is hope! You can style React components without losing friends. - Наука та технологія
5:15 - Standardization Methods
10:35 - Pre-processors.
14:22 - Inline Styles / 15:23 - Other usage of Inline Styles
20:12 - CSS in JS (Styled Components)
24:44 - What should you use ?
As someone who's touching web for the very first time right now the core concepts of HTML, CSS and Javascript are overwhelming enough. Now with ReactJS the barrier to entrance is even harder.
This video gives you a good overview and idea WHY we went from CSS files to CSS-in-JS with React.
Exactly the video I was looking for. Thank you very much.
Loved this talk. Fantastic information and great summary of the current style universe. I'm a big fan of CSS-in-JS but found that it got in its own way with global styles. Great for reusable components but if you have a default theme you want to fallback on it gets complicated and hard to implement. The Material UI base theme is a good example of this where it's easy to implement but tedious to customize on a larger website. I like using a base stylesheet with all my global defaults e.g. font size, families, etc, and then building component styles within CSS-in-JS.
There are so many variables to consider! There's also CSS Modules which would use plain CSS and works with pre-processors while providing modularity. There's the benefit of using React props inside your styles with CSS-in-JS. But you could achieve the same thing with conditional class names (using the classnames dependency).
Getting ready for a refactor/restructure on a medium-large react app and I found this talk very helpful. Thanks!
Absolutely terrific. Loved this talk. I ***REALLY*** hope you can do a follow up later, maybe on the tooling for using CSS-in-JS or the culture changes. Very enjoyable and VERY informative. Kudos. *standing ovation*
I loved the “The devil was contacted in making of this decked but declined to comment” bit
Really nice comparison. I'm on the side of BEM, in general, but the main idea of asking the right question is great!
Very nice talk. Thank you for the comparison!
Tough crowd :( great talk.
The slides' font-size is too small for mobile. For example see 20:39. It's like 3px. Please make the font bigger!
It's really very nice talk.
6:07 is function component uses 'this' keyword? I think it's only for class component.
Also accessing props, without taking props as a parameter. There is also a' href' attr in the img tag. I don't know who wrote these examples but clearly wasn't worried about the correct syntax :D
Excellen ttalk
Tailwind is here now
Hell I noticed these problems just building a small app with two people. It's annoying...
2020: css is still boken
This is why I prefer Vue over React. In Vue, you can have style scoped for each component, thus no global properties
I would have to agree with this, I just wish the job market would hurry up and move to Vue.