I feel (or, at least, I hope) we’re all taught pretty early on that putting CSS in our HTML is generally bad practice, especially when it’s woven into the HTML itself rather than being slotted neatly into the head.
But it got me thinking… There must be a reason this is possible at all, right? Is there ever a time when inline CSS may be appropriate or even neccisary? Or is it only possible as a result of how old these languages are now - something that was added and has fallen out of use, or ended up never being useful?
Honestly, sometimes I still use it, mostly when making a class for just one element would be annoying. Often its for examples in my tutorials. But I’m also self taught from dubious online sources, not a professional.
I use inline CSS when I am trying to modify something on my Wordpress or other blog and the CSS and theme files are such a confusing damn mess I can’t I can’t figure out where to make the change.
it’s untidy so i don’t do it a Lot, but i’ve used it sometimes! if it’s just one thing that i’m styling, then it seems silly to tab over to the css and write it up there, especially if it’s not a big change… it’s useful when you want one element to be an exception to a css rule. changing colors or whatever.
One very good use case is when you’re using Javascript to change styles on the fly. Using scripts to add css doesn’t add them to your stylesheet, it adds them inline dynamically, so if you’re styling everything via an external file, the JS changes won’t work.
For instance, I use it a lot when showing and hiding divs and other elements. Instead of putting the default value of “display: none” in my stylesheet, which will break the script changes, I add it inline, so that it can be changed dynamically to “display: block” when I want to show it.
I just remembered that I have some good examples of using inline CSS. My filtering items with CSS guide features an example where the items are just color blocks. There are 139 color blocks, each are just a span element with an inline background style. It would be so cumbersome to make a class/id for each color, and define the background color for each one separately in the CSS. The CSS would be unecessarily long with 139 classes/ids, and I feel like it would be a lot easier to mess up the colors this way.
similarly my rainbow gradient page features 106 unique rainbow palettes. Imagine making ids/class for each one of those and each individual color that makes up the palette for every gradient.
I usually do keep my CSS separate, but I don’t force myself to if it doesn’t make sense. Seperate CSS is great for common design traits and reoccuring elments/styles. And I will make a class or id for a single element/div if it is not part of a large group and/or has more than a couple properties.
I still haven’t figured it out with my PHP, but for whatever reason the images that are pulled from the code don’t apply the styles that are supposed to be there for the div they’re in. I’ve only been able to get the style to work with inline CSS.
(if anyone is curious about the code, here it is )
So unless I figure out what’s going on that seems to be a case for inline css.
Otherwise there’s the case for there being just One thing
the “sticker” I made a while back for a code jam event is a good candidate for some inline CSS… the majority of the definitions are in the site’s css file - and are percentage based - but the exact size (width/height, must be the same to get a circular sticker) is best inline, because that’s specific to what text is inside that particular sticker.
I use inline CSS on my homepage to style my logo and the badges. For my browser home page and the search page, I use <style>-tags because of their special styling. I don’t think there is any other good use case for them.
On my legal-name website, I have some pages in a certain section that need extra styling not included in the general stylesheet. I could make yet another CSS file, but for like five lines of code it would be both a waste and ridiculous.
In a similar way, sometime it’s necessary to override one style declaration for one element. If anything, adding a one-liner to the site-wide stylesheet would just muddle things. “So… on which page exactly did I put the element with this ID, and why?”
Allowing inline CSS is practicality in action. Purism doesn’t help anyone get anything done.
I oppose CSS frameworks that are inline css except using class= instead of style=
:p
defeats the purpose to have to go back to every header and change the class from red to blue individually, or whatever option you’ve chosen for a reused semantic purpose. Whether you’re using semantic elements or not.
huh, this reminds me of Toyhouse coding since that relies a lot on styling with pb-1/rounded-2 etc for styling… definitely looks like it can get messy as heck though but that’s cool to keep in mind for stuff you DO reuse a lot (though to some degree i resolve it through CSS variables i can just quickly change and it affects everything :P)
I use inline CSS all the time - plenty of one-offs that (to me) don’t warrant a class in my stylesheet, which I only use for the overall styling of my site, so for elements that I use in more than one place.
I’ve got a bunch of pages that use unique formatting, I like using some spontaneous creative formatting in some spots, and I see no point in adding a ‘center’ class when I can just use <div style="text-align:center">.
I also provide widgets for the no ai webring, some of which come with a little inline CSS so I don’t have to specify what to add to a stylesheet/head and what to the body.
So from my perspective, inline CSS has its role to play. There are a lot of “why you need to stop using [commonly used thing]!!!” type articles and videos out there for any given topic, but often the answer’s somewhere in the middle.
Is there a particular reason it’s bad practice, aside from being generally messier to read/sort through?
I use inline css similarly to the others; when I have a one-off. Especially with absolute positioning stuff… I’ll make a class for a type of item, like .pictures, that says the z-index and positioning and sizing of all the elements, and then use inline styling to write where each picture goes.
