template-no-inline-styles.md

ember/template-no-inline-styles

💼 This rule is enabled in the 📋 template-lint-migration config.

Inline styles are not the best practice because they are hard to maintain and usually make the overall size of the project bigger. This rule forbids inline styles. Use CSS classes instead.

Examples

This rule forbids the following:

<template><div style='width:900px'></div></template>

This rule allows the following:

<template><div class='wide-element'></div></template>

<template>
  {{! allowed when `allowDynamicStyles` is enabled  }}
  <div style={{html-safe (concat 'background-image: url(' url ')')}}></div>
</template>

Options

Name	Type	Default	Description
allowDynamicStyles	boolean	true	When true, allows dynamic style values (e.g. style={{...}} or style="{{...}}").

Related Rules

• style-concatenation

References

• Deprecations/binding style attributes