Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lint check to avoid inline styling

See original GitHub issue

A lint check to avoid inline styling in HTML files should be implemented. Instead, there should be a separate CSS class for it.

Examples:

Good pattern:

<div class="oppia-some-class-name"> 
    ......
</div>

Bad patterns:

<div style="width: 60%;"> 
    ......
</div>

OR

<div class=""oppia-some-classname" style="width: 60%;"> 
    ......
</div>

Issue Analytics

State:
Created 5 years ago
Comments:12 (8 by maintainers)

Top GitHub Comments

1reaction

kevinlee12commented, Oct 1, 2019

If you do it properly, this change should not be visible to the user. And yes, as part of this ticket, you’ll have to fix it in all of the places that violate this rule.

0reactions

kevinlee12commented, Jan 14, 2020

Filed #8423

Top Results From Across the Web

Are there lint to detect CSS inline style which no need to used ...

I would recommend looking into CSS Modules. They enable you to add css to your React components on a per component basis. For...

eslint-plugin-no-inline-styles - npm

ESLint for no inline styles allowed. Latest version: 1.0.5, ... Start using eslint-plugin-no-inline-styles in your project by running `npm i ...

Inline Styles: Yes or No? - EngineYard

Stéphane Derosiaux did a simple performance test comparing the two, and it does indeed seem that inline styles are slower. However, these ideas ......

Why you shouldn't use inline styling in production React apps

One of the main reasons that inline styling is not a good choice for your application is because it does not support (or...

Inline Styles in HTML - Codecademy

Inline Style Syntax. Inline styles look and operate much like CSS, with a few differences. Inline styles directly affect the tag they are...