Is it a good practice to use inline styles?
I'm always lazy to add a new class to a new div. So I just write css, inline.

  • 4
    Not really, but the real bad practice is laziness.
  • 1
    @nblackburn I know I am. But is there any problem if the no.of lines in .css is really high?
  • 1
    @reflexgravity It will take longer to load but that is why you minimize it using something like cssnano.
  • 3
    Its bad practice, you can have real problems with responsive because inline styles take priority, over linked styles. If you design your styles intelligently your style sheets shouldn't get too massive.
  • 2
    Inline styles are bad. Laziness is good if harnessed productively. Programming is all about laziness, we build things to make our lives easier in the long run. Get that CSS out of your HTML though, ewww! How difficult is it to add a link tag and put your CSS in a separate file!? It'll save you headaches in future when you or whatever poor soul has to maintain your sloppy spaghetti code mess and then realise you have to change the rules in 20 different places because instead of using a class you slapped your CSS right in there where it don't belong!
  • 0
    @ALivingMemory I don't could efficiency as laziness. :D
  • 2
    The fact that you are asking, makes it bad :p

    When you are inheriting someone else's code, an inline style maybe ok for 1 property. Otherwise you have to find the appropriate place in your css file to add the 1 style.

    Generally css order should follow the HTML hierarchy. If you plonk the style anywhere the styles will not cascade & you will upset somebody on devRant.
  • 3
    @reflexgravity it is really bad practice. Only use inline styles (style="...") if there is no other possibility. For example if you move something with JS...

    I can really recommend you to read into LESS (lesscss.org). It is far better (readability, structure, ...) than writing plain CSS. The LESS compiler then generates a CSS for you (minified if you want) so you can focus on clean coding.
    Especially if you're going to write lots and lots of style definitions, you want to use LESS or SCSS, to save time and errors! :)

    You can try your first steps with LESS by using it's client-side LESS compiler (you have to add the JS file of the compiler from lesscss.org), so you dont have to set up your editor with the LESS compiler. But for deploymend you have to use the compiler to generate a CSS, otherwise there will be a bad user experience (delay until styling is compiled through the JS compiler).
  • 1
    @qbasic16 Wow. Thank you 👍 I'll have a at it.
Add Comment