

Avoid using inline css styles
source link: https://dev.to/alim1496/avoid-using-inline-css-styles-5b6p
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.


Avoid using inline css styles
Jul 20
・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.
Recommend
-
51
Display property in CSS specifies the display property of the HTML element. Display in CSS defines how we generate boxes. display => none display => inline;
-
6
From site.css to component stylesOctober 7, 2020 · 4 minute read · Tags: blazor , css ,
-
7
Sanitizing html input: youtube iframes, css inline styles and customization Sometimes we give users tremendous power over the content generated on the web platforms that we write. The power to add content usi...
-
8
There are a variety of “buttons” in HTML. You’ve got: <button>Button</button> <input type="button" value="Button"> Plus, for better or worse, people like having links that are style...
-
9
Inline CSS at Khan Academy: Aphrodite posted on March 29, 2016EngineeringBy Jamie Wong I won’t ramble in this post about the maintenance woe that is CSS, as o...
-
10
Developing For Imperfect: Future Proofing CSS Styles Posted Mar 28, 2021 Written by Stephanie Eckles This is episode #26 in a series examining modern CSS so...
-
11
May 16, 2021 No, Utility Classes Aren't the Same As Inline Styles Half a decade after the first commit of the pioneering
-
6
Inline Styles as Classes (lol) Chris Coyier on Jun 16, 2021 — Open, multi-cloud stack for modern apps If you’...
-
4
css hack(*display:inline) 作者: dreamfly 分类: css 发布时间: 2015-03-18 22:01 不同浏览器或者相同浏览器不同版本,这里主要专指IE的各个版本,IE和非I...
-
3
IntroductionWhenever I start a new project, the first order of business is to sand down some of the rough edges in the CSS language. I do this with a function...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK