separate style tag

[amitguptagwl]

Thanks for this useful guide. I found some of the points really helpful. Hence I've a question. As you said that we should separate css style from tag

External stylesheets can be handled by the browser independently of Riot and tag files. This means styles can be applied to initial markup even if JavaScript errors occur or isn't loaded (yet).

Agree. Is it a good idea to reference multiple css files for each tag? (as it is good to have all relevant content of tag in single folder)

External stylesheets can be used in combination with pre-processors (Less, Sass, PostCSS, etc) and your own (existing) build tools.

I'm not sure but I believe server side compilation takes care of that riot foo.tag --style sass

External stylesheets can be minified, served and cached separately. This improves performance.

I also found an option for that riot foo bar --compact

Riot expressions are not supported in nested <style>s so there's no added benefit in using them.

The only reason I combine them with tag so that it is a complete component. Having tag and css in separate tag also solve this purpose. But I don't want to reference multiple files from HTML. Can there be another benefit of that.

The reason I'm raising this issue to clear and improve my undertanding.

[vinyll]

note: If you're using data-is= (introduced in v2.3.17) to initiate Riot tags, you can use [data-is="my-example"] as CSS selector instead of .my-example.

In Riot3 (and before?) you can just use the :scope selector or declare the <style scoped> and it will be transformed to the multiselectors :scoped, .my-example, [data-is="my-example"] {