4 ms·

Inline means no logic /state / pseudo.

• davnicwil 6y ago
  What do you mean?
  • wtf_srsly 6y ago
    That you can't have inline pseudo elements, state selectors etc. There's a lot of stuff thats just possible with a proper css file / tags.
    • davnicwil 6y ago
      Right - I mention this at the end of the article. By inline I'm not talking only about literally the style attribute but the inline, component-scoped pattern. For instance things like styled-components allow the full feature power of CSS classes, just inline rather than in the 'global' style.
      • somishere 6y ago
        Ah, so you mean a scoped stylesheet included in the same file as the rest of your component markup. Agreed this is a useful pattern in the right circumstances! Depending on your build process (and how you're using components), in the old days this method just saw a global stylesheet deployed as usual, except with automated / custom scoping applied via data attributes. Do web components use shadow-dom style scoping now?
        • davnicwil 6y ago
          > so you mean a scoped stylesheet included in the same file Exactly - perhaps 'colocated styles' might be a better term than 'inline styles'. > Do web components use shadow-dom style scoping now Not sure, I don't use or know much about Web Components (the technology) - by 'component' I just mean the web framework pattern of modularising a bunch of markup/behaviour (and styles if you agree with the arguments in the article!)
  • somishere 6y ago
    Yes, as mentioned in another comment I meant you can't do anything beyond styling the element in its current state. Consider a wild state-based rule along the lines of: `input:checked ~ output[data-i="0"] + section > div:empty ~ div:last-of-type:focus-within::before` .. for that you would need a stylesheet.
• tobr 6y ago
  That used to be the case, but it’s not true any more. You can use custom properties to react to media queries and pseudo selectors. See https://propjockey.github.io/css-media-vars/ https://propjockey.github.io/css-media-vars/
  • wtf_srsly 6y ago
    That's just a hack using css custom properties that still requires a global css file to define all breakpoints on the html element. Also, how does it work for pseudo elements, state selectors etc. ? I can just see examples for media queries. In my opinion it's also not really nice to read, just look at the example on his github page https://github.com/propjockey/css-media-vars https://github.com/propjockey/css-media-vars. Do you really think this is easier to read than normal media queries ?
    • tobr 6y ago
      Yes, you still need a CSS file or <style> tag to set up the breakpoints, but it’s going to be tiny and not something you actively work in unless you want to add a whole new breakpoint. I also agree that it’s not particularly easy to read, but since the whole premise is that you are writing components, you can simply abstract away this ugliness in whatever way makes sense to you. The result is similar to various CSS-in-JS solutions, but conceptually simpler: instead of having a library that has to manage inserted stylesheets and generated class names, you just generate (uglier) inline CSS directly. It also makes static HTML output trivial, without any of the fragile build process used for CSS-in-JS - all you need is that one static CSS file and the generated inline style attributes.
  • somishere 6y ago
    Hadn't heard of using custom properties like this. That said it feels like classes would provide a better, more extensible solution