How to better organise CSS code

[f14m07]

Hi,
I have CSS code for EME pages in several places:
1- in the Additional CSS part of my child theme Twenty Twenty Four, which also contains CSS code for WP
2- in the two files eme.css and eme_print.css, in my theme directory, to manage the display and printing of #_EVENTPRINTBOOKINGSLINK

Is it possible to improve and simplify this all this? In particular, the additional CSS part of the theme is not very user-friendly

[liedekef]

I can't help how WP works :-) But you can put all your extra css in the eme.css file, doesn't that work?
Also, see the setting "Extra html header" setting in EME.

[f14m07]

Thanks I will test

[f14m07]

Yes, everything can be put in eme.css
I suppose that the benefits of using ‘Extra html header’ are :

• reduce the length of the eme.css file
• only load CSS on certain event or location pages
  But perhaps there are limits?
  Can I just put the CS there?

[liedekef]

Well, a separate file (like eme.css) has the advantage of being cached by the browser, so it is faster.
But you can put it in the header setting (but: wordpress might filter stuff out in there, so check the result after saving it). Next to that: you have a setting for headers per event/location too.

[f14m07]

It seems that the WP CSS code for my child block theme is not taken into account if it is in eme.css, for example for the menu. Only EME CSS code is Ok.
I have to put it in the additional CSS tab when I edit the theme

[liedekef]

did you enclose it in a style-tag? When I test it here, the theme CSS loads before the extra EME css ...

[f14m07]

For example, this CSS doesn't work in eme.css

/* Styles for WP menu all items */
.wp-block-navigation .wp-block-navigation-item__content {
    font-size: 17px;
    margin-right : 10px;
    padding-right: 10px;
    color: Black;
    background-color: azure;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
    color: blue;
    background-color: LightGreen;
}

/* styles specifically for WP sub menu items */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 15px;
    color: Black;
    background-color: azure;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: blue;
    background-color: LightGreen;
}
.wp-block-buttons>.wp-block-button.wp-block-button__width-100 {
    flex-basis: 70%;
    width: 80%;
}

It aplies to the block navigation

[liedekef]

did you enclose that in a style-tag? Change the comment to something that indicated EME in it, put it in the header-setting of EME and send a link to a demo, so I can see the (non-)effect on your site.

[f14m07]

No. This code is in the additional CSS tab of the child theme 2024 de WP which is a block theme.
If I add this code, which is for WP and not for EME, in eme.css file, it is not taken into account.
Bloc theme is quite specific for CSS.
If you have some time, I can give you access to admin site. You are already a registered user I have just to give you the profil

[liedekef]

I don't need admin access, but my questions remain the same. If you want it in EME headers-setting: enclose it in a style-tag and it should work. If not: change the comment in the css to something that indicated EME in it, put it in the header-setting of EME and send a link to a demo, so I can see the (non-)effect on your site.

[f14m07]

I haven't use header-setting of EME. So I need some time to test that.
Most of the pages of the site are for only login user. I will come back after my tests

[liedekef]

In the eme.css file it should work as well. It all depends on when/how your theme css-settings are loaded. So feel free to put it in eme.css too and demo then.

[f14m07]

Perhaps I misspoke. I get the result I want in CSS style. My problem is that it's in several places (eme.css eme-print.css addcss tab of the theme) and that the CSS editor provided by my theme is narrow and uncolored.
Also, I'm not sure that I understand what you mean by ‘a demo’. I only have 2 sites, one in production and the other on my local computer.

[liedekef]

In the past, many themes did not have this so that's why EME has it on its own. Also, when switching themes the css settings needed to be copied over, so then it was easier to have some in a specific eme.css file. The eme_print.css is only loaded for printing purposes, but you can still put it in your regular css as well and use css media properties to indicate it is for printing only.
But feel free to put everything in your theme css file, or in the eme.css file :-)

Edit: btw, the doc also mentions all of this: https://www.e-dynamics.be/wordpress/css-change-the-look-and-feel-of-any-element-on-the-page/

[f14m07]

Thanks a lot for your help.
I'm going to reread all this and brush up on my CSS knowledge.