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.
Top comments (4)
Or you could use something like bootstrap, which has built in classes that work like styles
If you are going that route, then always use something like Tailwind and not bootstrap.
Yeah, that probably makes more sense
Thanks a lot. My mistake. Will edit it asap.