HTML CSS – When to Use a CSS Class Over Inline Styling

(I presume you meant to say .style1 .style2 .style3 in your CSS example, otherwise you're referring to tag names.)

In CSS, .style1 .style2 means something completely different from .style1, .style2: the first only applies an element to which has both style1 and style2 classes, the second applies to both style1 and style2 individually. That distinction is vital (don't forget the C in CSS means "cascading"), so there shouldn't be a way of eliminating the need for the comma.

Now, as to why you can't use commas in the HTML element, you may well have a point: unfortunately it's too late to do anything about it.

There are two main reasons why this auto-generated inline styling is bad:

1. 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.

2. 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.}