Avoid using inline css styles

#html #css #webdev #beginners

While developing a website we can add styles in various ways. We can write css styles in a css file and import it in html file, write in <style> tag of <head> or write inline style within each element of the <body>. I would like to share some problems with inline styling.

Lack of reusability

Using the same css class multiple times should be one of the major aim in adding style to a website. As our project gets larger if we do not use same class for same type of styles, there is a good possibility of writing redundant styles which unnecessarily makes the project larger. If we write inline style, we can never use it multiple times which breaks the DRY principle.

Inability to use css selectors

We cannot use css selectors while writing inline styles. Selectors like before, after, hover, focus etc are very much useful for styling which we simply cannot use in inline styling.

Difficulty in code readability

In a large html file there will be a lot of elements. If in addition there is inline styles then it becomes very much difficult for someone to read and understand that html code. Inline style hampers code readability a lot.

Lack of writing media queries

Web developers now-a-days must make the website responsive. In order to make the site responsive writing media queries is a must where different css rules are applied based on screen width. Inline style does never allow us do that.

Maintenance problem

Suppose you are dealing with an html file containing inline css styles. In that case you have to face difficulties in debugging and adding new codes which can be recovered by simply going to the element class in css stylesheet very easily.

No scope of caching

Browsers cache external stylesheets so that those can be loaded easily for further rendering but inline styles cannot be cached since those are with the html code segment. So everytime you visit a webpage inline styles need to be loaded with html.

All of these issues are seen while using inline styles. If the project is larger, using inline styles is not a good idea. Inline styles can load css faster which is negligible. We can use inline styles in smaller projects though.