Bad coding practices with Block Themes

[aureliegerber]

Hello wordpress community,
One of the basics of web development: no <style> tags in html, no inline css.
However, with block themes there are many <style> tags in the html and many inline css.
Is it only me that this bothers?
Are there plans to change this?
Best regards
Aurélie

[bph]

Hi Aurélie!
Welcome to the Developer blog topic discussion.

no <style> tags in html, no inline css.

I would not call it basics. It sounds more like a dogma to me.
I also don't think that many style tags and inline css are unique of block themes. Plenty of other themes, plugins and tools create a myriad of them on any website, any CMS really.

[aureliegerber]

Thank you very much Birgit for your quick response!
With quality classic themes there are not very many <style> tags.
With block themes it’s inevitable. We have to remove them.
For me this is a big problem since I work in web eco-design.
So I'm seriously considering abandoning WordPress if I don't find a satisfactory solution.
I have created my own block theme (without <style> tags or inline css) which allows for eco-design
of sites but I don't see myself maintaining it. It's too big a job.

[vcanales]

Hi @aureliegerber. I'm wondering if you have an explanation or documents that describe why this might be a bad practice, as well as specific examples of where this is happening.

I'm asking because, as far as I'm concerned, inlining CSS may or may not be a bad practice depending on the context.

[aureliegerber]

Hi Vicente!
Thank you for your question.
There's an enormous amount of documentation on the subject.

For example, here are two references:
https://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/
https://collectif.greenit.fr/ecoconception-web/115-bonnes-pratiques-eco-conception_web.html
(pratice 41)

It's the first thing you see in any web training course. Are these courses bad?

[vcanales]

Thanks for the links. I'd appreciate a example of what you mean by inlined CSS in Block Themes. In particular, I'd like to understand if you're talking about code generated by the editor, or code that has been manually added by developers. A search for <style> on https://github.com/WordPress/community-themes doesn't render any results.

For example, inline styles — as in the style tag of an HTML element — are sometimes unavoidable because the editor needs them to keep the blocks configurable through the editor, and they're not meant to be edited directly in the pattern or template files that they're present in.

[aureliegerber]

Thank you very much, Vicente, for taking the time to reply.

My problem is more with the <style> tags than with inline css.

In fact, the inline css problem already existed with some classic themes, and solving it is easy.
However, I had imagined that with this new version of WordPress this "problem" would disappear. Now it's even more present.
I'm talking about the inline css created by the editor.

As for the <style> tag, with classic themes there weren't as many in the part of the html.
With a block theme, there really are a lot.

If I understand correctly, it's not possible to do otherwise for the site to function correctly?
For example, it wasn't possible to put them in a separate style sheet loaded with the link tag?

And what happens if we remove them using functions.php and load the associated styles into a separate style sheet?