4 ms·
I was taught to avoid inline CSS, like the CSS used to apply these filters. Was I taught wrong or does this site use less than ideal practices?
by MaximumYComb 7y ago
I was taught to avoid inline CSS, like the CSS used to apply these filters. Was I taught wrong or does this site use less than ideal practices?
- jake-low 7y agoI grepped the minified source code included in the page, and it looks like the project was built using React. React isn't opinionated on how you should handle component styling, and so the community has experimented a lot [0] with different solutions to managing CSS for components. One approach is to have the component set its own inline styles in the render function. This makes it easy to have the component's styles to be "reactive" to its props (arguments), e.g.: function MyButton({ importance }) { return ( <button style={{ color: importance === "high" ? "red" : "grey" }}> Click me! </button> ); } In my opinion, Christopher “vjeux” Chedeau makes the most cogent argument [1] for why this way makes sense. It's worth a read; even if you end up disagreeing with the conclusion. A related solution is to use classes, not inline styles, but to use a CSS framework such as Tachyons [2] where the included classes are small, single-purpose styling utilities like "serif" (applies font-style: serif) and "br-pill" (adds rounded borders). [0]: https://github.com/MicheleBertoli/css-in-js#features https://github.com/MicheleBertoli/css-in-js#features [1]: https://speakerd.s3.amazonaws.com/presentations/2e15908049bb013230960224c1b4b8bd/css-in-javascript.pdf https://speakerd.s3.amazonaws.com/presentations/2e15908049bb... [2]: https://tachyons.io/#style https://tachyons.io/#style