I know that Inline CSS styling gets so much hate from many developers, and I understand that some of this hate is justified by the following facts:

  1. Inline styles increase page size as they don't get cashed like CSS files do. But isn't the difference in size minor in most practical cases ?
  2. It's hard to maintain inline CSS styles. Well I think it depends on whether the element you're styling will have a unified look across the website or is it an element that will be used only once on the website, or if you're applying styles that will only apply to this element.

I know that many developers may say that it violates the "separation of concerns" rule , because the we're styling within the HTML markup , but I have two things to complain about that claim:

Isn't in fact a method to better separate concerns when you isolate an HTML element along with its CSS in the same spot ? this way the element and all its dependencies (read CSS code) will be encapsulated.

I am not saying that we should use inline-styles all the time as there is definitely a lot of times where it make sense to use a dedicated CSS classes/files for styling elements, especially those that appear in multiple pages across the website and have the same look or almost the same look.

The reason I am asking this question is because every time I write inline CSS code I feel guilty and start thinking that the code that I wrote is bad, and most of the time end-up separating these styles that I think should be coded inline into a separate file.

Is there any reason other than the ones I already mentioned why CSS inline-styles gets hate ?

Thanks in advance.

  • It's funny that the post got down-voted without the down-voters even bothering to write an explanation... – Tarek Apr 12 at 19:49
  • You have two downvotes and two vote-to-close:opinion-based. There's chances that these came from the same people. – Sebastian Redl Apr 13 at 8:55

I think separation of concerns in the case of external css is more related to separating styling from defining content. Writing the <div> and <li> is about defining content, the css is about how it is represented. Although in html these things are pretty related actually.

Besides the separation of concerns I also think it is easier to read. Having all the styles inlines can obfuscate the bigger picture. Also the naming of the css classes can give additional semantics and improve readability.

Finally it's easy to slip into copy pasting inline styles everywhere. This can make it harder to maintain in the long run.

Encapsulation can also be achieved by creating a separate css file for each html file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.