Does it make sense to detect an inline CSS style that should not be used or empty?

Question

I doubt that it is possible to check the css inline style that we introduce, but do not need to use.

For instance,

in .js file

 line: {
    borderBottom: '1px #ddd solid',
    paddingBottom: '5px',
    backgroundColor: 'white',
    border: '1px solid #ddd',
    padding: '10px',
    marginTop: '10px',
    marginBottom: '10px',
    borderRadius: '5px',
    textAlign: 'center',
  },
  container: {

  },

in the file that calls .js

      <div style={styles.line}>

From the example, in a file that uses a style, you don’t need a container or in styles.line, you don’t need to use it all (put too much style beyond the actual use.). Is there any lint for detecting and warning, errors or automatic removal of those that I call?

Thank.

Answer 1

I would recommend looking into CSS modules. They allow you to add css to your React components based on each component.

for instance

(HelloWorld.js)

import React,{Component} from 'react'
import styles from './HelloWorld.css'

class HelloWorld extends Component{
    render(){
       return(
           <h1 className={styles.title}>Hello World</h1>
       )
    }
}

export default HelloWorld

CSS (HelloWorld.css)

.title{
   font-size: 48px;
   color: #ff0000;
   font-weight: bold;
}

CSS, - javascript, , , CSS.