Avoid Inline Styles
ID |
html.avoid_inline_styles |
Severity |
low |
Remediation Complexity |
low |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Code Smell |
Language |
Html |
Tags |
code_smell |
Rationale
Inline styles scatter presentation across the markup, making styling hard to reuse, override or theme, and bloating the document. Moving the declarations into a stylesheet keeps presentation in one place and the markup focused on structure.
<div style="color:red">x</div> <!-- FLAW — presentation in markup -->
<div class="alert">x</div> <!-- OK — styled via stylesheet -->Remediation
Move the declarations from the style attribute into a CSS class or rule in a stylesheet, and
reference it from the element with class.