Discussion on CSS Best Practices

[prests]

Hey all I'm moving my conversation from the templ slack channel to here to hopefully get some more eyes on this discussion.

I'm trying to understand how the CSSMiddleware provided by templ scales when you have a lot of CSS components in your templates. Perhaps I'm not understanding the example well enough but copying every CSS component to the middleware seems like there'd be a lot of lines, no? Not necessarily bad but I was wondering what people do with their CSS components at scale. I'm trying to avoid using tools like tailwind because you're not learning CSS really you're learning tailwind, but want the bandwidth saving of having 1 global stylesheet.

Secondly what are the best practices for accessing pseudo classes like :hover, :root, etc using templ's CSS components?

Appreciate the help, I've been enjoying templ so far!

[prests]

I tried the following to work with pseudo classes where I wrap the component in a class and tried to use nested CSS but that isn't parseable.

package components

css testClass() {
  background-color: blue;

  .foo:hover {
    color: red;
  }
}

templ Hello(name string) {
  <div class={ testClass() }>
    <div class="foo">Hello, { name }</div>
  </div>
}

[a-h]

Sorry, the CSS components don't currently deal with CSS psuedo classes. I'm thinking of new ways to support this in #504

[ainsleyclark]

Hi @a-h

Is there a list of attributes that's supported within the CSS blocks? I seem have seen that media queries weren't responsive either. Would be great to know what we can achieve in these blocks on the docs.

[luxxxoor]

Hi @a-h, i'm new to Templ, is there a way to achieve hover via css functions ?

[joerdav]

@luxxxoor hover is what we would call a psuedo class, it's currently not supported, but in #262 @a-h mentioned his plans for more flexible css functionality your thoughts on the approach would be valuable.