How strictly should I keep styling separated from the html code?

Question

What is the most common or accepted way to prioritize between clean html code and clean css code?

As I see it there are two possible approaches…

Either you can go for a html code with minimal markups related to styling. The downside is that the css tend to be a bit messy and perhaps a bit redundant when you for example add similar styling to different objects (which in this approach lacks suitable classes).

The other approach results in a cleaner css code where you have predefined classes for different stylings, think w3.css or bootstrap. This time the downside is that you may end up with a html code that heavily relies on the class attribute of the tags, sometimes the combination of several classes; meaning that the html markup isn’t really separated from the styling.

I realize that there is no definite answer and that the line between the two options are floating. But what is the preferred approach, given that you are not using any precompiled framework?

Edit: The question is not about inline css. It is about how to think regarding the use of predefined css classes. For example… if you add a class similar to “w3-panel” to some divs then you effectively add some margin in the html code. If you instead target those divs specifically by using selectors you keep the html free of styling.

The former produces cleaner css code and the latter produces cleaner html code. Which route is the most accepted one when not implementing a framework (forcing you to style by adding classes to the html)?

Answer 1

The advantage of the separation is to make it easier to maintain and if you find a css too messy, take a look for SASS or SCSS. And if you are using jQuery to manipulate your CSS, it is easier if you have your definitions in a CSS file. Imho the worst choice you can make is to mix it up - some definitions in CSS and other in the HTML - you may find it useful now, but try to change the site in a few months.

Answer 2

It really depends on your business of application.

If you put styles in same file in html file size would be increasing and it would be getting messy when you added new css each type, but as your css and html are in same file and css is well written and used, page load time would be minimum as html find css in same file.

If you put styles in separate css file, it would be well readable and accessible, you would have separate layer for styles and markup. But each your page load, your included css file would also be load in addition hence increase page load time.

If your application or html page is one time i.e no much furthur additions in future and will be remain same mostly then no need for separe css file.

If your application would be growing or html page being updating quite often, then you should be separate css files.

Answer 3

Personally, I think it is best from the beginning to split the code as much as possible. (HTML for markup, CSS for styling, etc).

Pro(+)

• It is easier to troubleshoot
• You can scale and later on introduce support tools such as SASS for CSS, etc.
• A task can be splitted between persons.
• Easier for another programmer to understand the setup of files.

Neg(-)

• Take a bit energy to be disciplined and really keep coded splitted.
• You sometimes would need a larger monitor to have the splitted codes in parallel view.