search

voorhoede / riotjs-style-guide

Opinionated RiotJS Style Guide for teams.
Creative Commons Zero v1.0 Universal
287 stars 22 forks source link

how to compile a riot-tag with external style sheet #47

Closed UniK closed 8 years ago

UniK commented 8 years ago

Can you please give an example of how to compile a riot-tag with external style sheet?

jbmoelker commented 8 years ago

We recommend you compile the tags and the styles separately. So that you can use your favourite build tools for your css (e.g. postcss):

# compile tags
riot --ext tag.html modules/ dist/tags.js

# compile css separately, for example with postcss
postcss --use autoprefixer -o dist/tags.css modules/**/*.css

And load that css in separately as well:

<!-- in dist/index.html -->
<html>
<head>
  <link rel="stylesheet" href="./tags.css">
</head>
<body>
  <my-root-tag>initial content</my-root-tag>
  <script src="./tags.js"></script>
</body>
</html>

We're basically doing the same in this todo-app example but without a css pre-compile step.

Hope that answers your question.

phortuin commented 8 years ago

Some additional clarification: your folder structure would be something like this

dist
    tags.css
    tags.js
    index.html
src
    modules
        app
            app.tag.html
            app.css
            README.md
        nav-menu
            nav-menu.tag.html
            nav-menu.css
            README.md

All css (modules/**/*.css, which means modules/app/app.css and modules/nav-menu/nav-menu.css in this example) gets compiled into dist/tags.css. The dist folder is built by your build process. Hope this helps

UniK commented 8 years ago

Thank you for these very detailed examples, now it is clear how it suppose to work ;-)

I still have one concern though... how is the CSS-namespace managed properly? (e.g. two different riot-tags have different styles for <h1>?)

jbmoelker commented 8 years ago

Concerning name spacing / scoping of your styles to a tag: Styles we only want applied to elements within a riot tag, we prefix with that tag, e.g. my-tag h1 or if BEM my-tag__title (see Use tag as style scope). But styles we simply want applied to everything on the page, we might place in a modules/app/app.css or modules/core/core.css and just scope them directly to the selector, e.g. h1 { font-size: 2rem; }. If you are using a css processor which supports imports you could even declare your dependencies. So inside modules/my-tag/my-tag.css you could put @import "../core/core.css" etc.