Vugu Files: Styles (CSS)

Style blocks are a way to express CSS that corresponds to your component and is output along with your component markup. Example:

<div class="some-component-here">
    <strong>"Fashions fade, style is eternal."</strong> —Yves Saint Laurent
</div>

<style>
.some-component-here strong {
    color: #7c5a9e;
}
</style>

A few words of widsom and caution regarding style blocks:

• It is good practice to prefix your styles and make them correspond to your component's main HTML element - either a class or id. In the example above you can see we use .some-component-here as a prefix to avoid style collisions. Generally, using the exact component name (the name of the .vugu file minus the extension) is a good way to go.
• Styles are deduplicated as literal strings of the entire contents of the <style> tag, so only one of the same block of styles is ever output.
• Styles are inserted in one place, at or above your root component and in the order that components are rendered. This usually produces the right effect but it's worth knowing when you are debugging style issues.
• You probably do not want to use @import to load external style sheets. If your component is shown and then hidden and shown again it will cause the import to be removed from the page and then re-added and most likely your browser will load the stylesheet again. For styles which should always be present, it is better to add them to the root component.
• Go expressions or other dynamic elements are not currently supported in styles.