DEV Community

loading...
Cover image for Avoid using inline css styles

Avoid using inline css styles

Mohammad Abdul Alim
Tech enthusiast Quick Learner Believer
・2 min read

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.

Discussion (5)

Collapse
fcalderan profile image
Fabrizio Calderan

Hi, the snippet in the cover image should be <p class="text-large">.

Collapse
alim1496 profile image
Mohammad Abdul Alim Author

Thanks a lot. My mistake. Will edit it asap.

Collapse
theblobscp profile image
The Blob SCP

Or you could use something like bootstrap, which has built in classes that work like styles

Collapse
ceoshikhar profile image
Shikhar Sharma

If you are going that route, then always use something like Tailwind and not bootstrap.

Collapse
theblobscp profile image
The Blob SCP

Yeah, that probably makes more sense