If I'm using a technology like Grails. It's really easy to wind up with inline styling.
Are there any downsides to auto-generating code with inline styling? Is this considered bad practice? Why?
Add a comment
|
5 Answers
There are two main reasons why this auto-generated inline styling is bad:
Inline CSS styling overwrites by default the rules defined in a stylesheet. This means that you'll have a hard time to style the content according to your requirements through the stylesheet itself, and it would require to constantly switch from stylesheet to the tool which let you customize the auto-generated code.
Auto-generated code is [mostly] always stupid. And by stupid, I mean... totally, horribly stupid. If you have three buttons on a web page and you change the text color of those buttons, instead of writing one line of code, the auto-gen tool will write three lines. More buttons → more lines → more nightmare and performance issues.
Moreover, auto-generated code is mostly limited to what it is capable of doing. In CSS, I know how to create a shadow or a gradient which will work in Chrome, Firefox and other normal browsers. I also know it will not work in Internet Explhorror. If you use auto-generated code, in most cases (today there are a few exceptions), either it will not even let you create a shadow or a gradient, or it will do it, but will not tell you that it works only in some browsers¹.
Finally, consider a following scenario. You've created a website which uses auto-generated code to change the color of the buttons to gray. There are around 30 pages with an average of 5 buttons per page. Two days before the release, you're asked to switch the color from gray to teal:
If you've used a stylesheet from the beginning, you would spend ten seconds finding the line which specifies the color, and changing it.
If you use auto-gen code, you have to go and change all those colors for all 150 buttons, by hand. Or you can try to develop a reliable solution which will walk through all your source files and change the color. Can you do it in ten seconds?
¹ Of course, this is not an issue if you're knowledgeable about CSS and you know exactly what you're doing.
answered Mar 6, 2012 at 17:24
-
What about cases where styling is semantically significant, e.g. labels are individually assigned to colors along a continuum which represent the states of some parameters, such that there are hundreds or thousands of different colors that might be used? If CSS allowed a class to say that a color should be computed from a function in a certain way, and then the HTML for individual labels could specify parameter values, that would be nicer, but I don't think that's possible.– supercatAug 26, 2014 at 21:36
-
@supercat: If you're creating thousands of blocks with different colors by hand, you're doing it wrong anyway. But yes, if a style is proper to a single element on the whole site, it makes sense to use inline styling. Aug 26, 2014 at 22:09
-
-
@supercat: "doing it right" would be determining the logic behind the colors and use either server-side programming language or JavaScript to generate the colors automatically. Aug 27, 2014 at 7:30
-
@supercat: I recall a related story: once, a colleague was asked to make a rainbow-colored zone on a website (yes, this was in 199* when such things were indeed accepted by the designers). My colleague then created 256 blocks and, by hand, set their color by searching for RGB values in Photoshop. The hour it took him could be spent doing a task different from the one monkey can do. Aug 27, 2014 at 7:35
Downsides, to my eye:
You may impair the integrity of visual design. If you reuse styles from a carefully crafted CSS, your design has better chances to look consistent.
Changing the visual design becomes harder because styling information is scattered in code.
Your page gets bigger. This may play a role if you e.g. style each item in a long list.
There a are times when you can't escape inlining style info: it's sending HTML-formatted emails.
Yes, inline styling is considered very poor practice. You have no centralized location for your styles, which is why (ideally) you want to link to an external style sheet. With an external style sheet, you make a few simple edits and your changes are reflected site-wide. With inline styles, you have to go hunting for those styles and make your edits.
-
Right - if you're dealing with static code there's no argument that inline styles are poor practice - but I'm referring to a situation in which code is being automatically generated. The overhead of changes is handled by the generator, not you.– Joshc1107Mar 6, 2012 at 16:42
-
@Joshc: even then it makes it harder. If you have a dedicated designer, they will want to work with css, not digging through generated files to tweak things. Additionally, depending on the way the generator spits it out, it may result in a larger download and longer page load time for the browser.– DaenythMar 6, 2012 at 17:35
-
1I don't think OrganizedFellow and Daenyth are following what you mean by 'generated code'. It can be contained in 1 place (in your code library), and the designers would be touching that single spot, not the multiple places where its output in the HTML. And its highly unlikely that inline styles would ever be large enough to cause a visible performance impact on anything other than mobile sites.– GrahamOct 10, 2012 at 17:30
The worst part about inline styling is that you can't use Chrome tools to easily play around with alternative styling techniques.
Yes, this is a form of guess and check but sometimes it helps to flip through options to see what each one would look like.
By putting your styles inline you make it harder for others to go in, understand what you did, why and what effect it has.
It is a somewhat shortsighted way of doing things. It's like assuming that the code is perfect and no one will ever what to change the visual presentation of what you did. This is pretty much always a bad assumption.
Can anyone think of a good reason to inline styles? I can't.
-
Because it's easier for those generating the code ;-) Oct 18, 2016 at 16:51
I think "it depends". Inline styles put the CSS where the affected component is which makes it easier to find. CSS selectors can be very cryptic and can affect components that were not intended to be affected. I find stylesheets useful only when a style is intended to affect multiple components, and of course then they are VERY useful.
It seemed to me when CSS first came out (when I first learned about it) a lot of users went a little overboard and declared that ALL styles must be in stylesheets. I say use them when they make your code more concise, more maintainable, and more readable. Otherwise I think inline styles are fine.
