When first making websites you will probably want to style your html elements so the site doesn't look like it's from the 90s. This is done with cascading style sheets or css. Css is added to HTML in 2 ways inline or as an external file. A lot of people when first starting out will put their css inline. When first experimenting with how html and css fit together this is fine but you can run into a few problems doing this. I have outlined 5 reasons I believe you should not use inline css.
1 Maintenance
Websites of all types need updating and occasional rebranding. most people will want to go back and change certain things. This is a normal part of the build and maintenance process. But it is very difficult if you have to update each element individually. That also takes a lot of time and we don't have much of that so let's not waste it.
2 Redundancy
A lot of elements will end up having the same style properties. For example you probably want all the buttons to look the same. Instead of copying and Pasting the same values for each element. You can create css in an external sheet for all button elements and put the style properties in once then they all look the same. We now tie this back to number one, you want to update the color of your buttons. You can just update the color in your css file once instead of having to go and change the value for each element individually.
3 Speed
More lines of code means longer load times. What could be accomplished with a few lines a css if repeatedly placed inline throughout a webpage can really increase file size. Bigger file means it eats up bandwidth, resulting in a slower site. When coding I try to take a DRY(don't repeat yourself) approach as it will often save time both writing and running the code. Browsers will also cache external file sheets for later use. However inline css can't be cached and will have to be reloaded every time the page is loaded.
4 Not S.E.O friendly
Inline css adds a lot of extra text to your html this can affects how it is viewed by a search engine bot. This can affect your search engine rankings. Inline css also doesn't play well with older screen readers and can result in a style and/or layout that you didn't intend.
5 Unresponsive
Css selectors and media queries don't work when placed inline. That's means no
::hover
::before
::after
Or
@media
As a person who puts a lot of emphasis on responsive design I use selectors and media queries very often in my css.
bonus
Inline css will override a global or inherited styling. This can be helpful if that's your intention. But can have unintended outcomes and get out of hand quickly when updating your site.
The main point I want to get across is keeping the design separate from content. It can save you many headaches and is considered a web design best practice. Have fun styling your sites.
Top comments (0)