Styling

This section explains some different ways to style HTML within Marko. From simple inline styles to powerful techniques like CSS Modules for organized and maintainable stylesheets.

Inline Styles

Marko enhances the HTML <style> tag to be processed and optimized by the bundler used in the project. A template may specify any number of <style> tags.

By default, all styles defined in the template are globally scoped. As such, many Marko projects use patterns like BEM to avoid name conflicts.

<style>
  /* Bundled and loaded once */
  .fancy {
    color: green;
  }
</style>

<div class="fancy">
  Hello!
</div>
style
  --
  /* Bundled and loaded once */
  .fancy {
    color: green;
  }
  --

div.fancy -- Hello!

The <style> may include a file extension to enable css preprocessors such as scss and less.

<style.scss>
  $primary-color: green;

  .fancy-scss {
    color: $primary-color;
  }
</style>

<div class="fancy-scss">
  Hello!
</div>

<style.less>
  @primary-color: blue;

  .fancy-less {
    color: @primary-color;
  }
</style>

<div class="fancy-less">
  Hello!
</div>
style.scss
  --
  $primary-color: green;

  .fancy-scss {
    color: $primary-color;
  }
  --

div.fancy-scss -- Hello!

style.less
  --
  @primary-color: blue;

  .fancy-less {
    color: @primary-color;
  }
  --

div.fancy-less -- Hello!

Inline CSS Modules

If the <style> tag has a Tag Variable, it leverages CSS Modules to expose its classes as an object.

<style/styles>
  .foo {
    border: 1px solid red;
  }
  .bar {
    background: green;
  }
</style>

<div class=styles.foo/>
<div class=[styles.foo, styles.bar]/>
<div class={
  [styles.bar]: true,
}/>
<div class=styles.foo/>
style/styles
  --
  .foo {
    border: 1px solid red;
  }
  .bar {
    background: green;
  }
  --

div class=styles.foo
div class=[styles.foo, styles.bar]
div class={
  [styles.bar]: true,
}
div class=styles.foo

This approach allows for scoping of CSS class names without needing to follow naming conventions such as BEM.

You may still provide a custom file extension to enable to use of preprocessors.

<style.scss/styles>
  $primary-color: green;

  .fancy {
    color: $primary-color;
  }
</style>

<div class=styles.fancy>
  Hello
</div>
style.scss/styles
  --
  $primary-color: green;

  .fancy {
    color: $primary-color;
  }
  --

div class=styles.fancy -- Hello

Auto-Discovered Styles

Styling files adjacent a custom tag are automatically discovered. These files are imported and processed the same as inline styles.

style.css

.fancy {
  color: green;
}

index.marko
<div class="fancy">
  Hello!
</div>
div.fancy -- Hello!

Tip

When a template is becoming too large it can be helpful to pull its styling into an associated style file such as this.

Imported Styles

Styles may also be imported.

fancy.css

.fancy {
  color: red;
}

index.marko
import "./fancy.css";

<div class="fancy">
  Hello!
</div>
import "./fancy.css";

div.fancy -- Hello!

Tip

Although generally inline or auto-discovered styles are preferred, importing styles can be helpful when sharing across templates.

Imported CSS Modules

CSS Module files may also be imported.

something.module.css

.fancy {
  color: red;
}

index.marko
import styles from "./something.module.css";
<div class=styles.fancy/>
import styles from "./something.module.css";
div class=styles.fancy

Caution

Since most bundlers are configured by default to support css modules for *.module.css files, this should work out of the box. If it is not supported by a bundler there is almost certainly a plugin.

Contributors

Helpful? You can thank these awesome people! You can also edit this doc if you see any issues or want to improve it.