I post this temporarily as a bug, but I don't really know if it is one.

I was running Drupal 10.3.7 using D8W3CSS theme (extended by a custom subtheme, and then again by a site-specific subtheme) and W3CSS paragraphs (with versions contemporary of Drupal 10.3.7).

I had defined a custom paragraph template in my custom subtheme, and in this custom paragraph template, I attached a css library in the custom subtheme.

And in my site-specific theme, I had overridden the CSS using the site-specific theme's custom CSS.

For example, there was a declaration "div.para-text { position: relative; }" which got overridden by "div.para-text { position: absolute; }" in the custom site-specific CSS.

Inspecting the element, in the styles, I see div.para-text { position: absolute; } above div.para-text { position: relative; }, so it's overridden.

-------------
Now: I just updated to Drupal 10.4.6, and I also updated D8W3CSS theme and paragraphs, no changes to custom subtheme and site-specific theme.

After clearing caches, etc. the page looked in disarray, and upon inspection of the elements, I noticed that the order of the CSS declarations for that element was now reversed: div.para-text { position: relative; } now appears above div.para-text { position: absolute; }, so it wasn't overridden anymore.

So I'm puzzled about what caused the change.

I also wonder if the desired behaviour is that the site-specific theme's custom CSS should override a library included in a custom paragraph template or not.

Comments

drupaldope created an issue. See original summary.

drupaldope’s picture

drupaldope commented
Issue summary: View changes
flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
commented
Category: Bug report » Support request

Hello,
I'm not entirely sure what caused the issue, but the recent update to the w3css theme involved removing the word "Version" from all libraries. This change was necessary because it was causing cached files in the browser dependent on the Core version. You can read more about it here: https://www.drupal.org/project/entity_browser/issues/3325948

To control the order in which libraries are loaded, it's recommended to follow the SMACSS (Scalable and Modular Architecture for CSS) methodology. Drupal allows you to organize your CSS files into the following categories, each with its own load order weight:

  • Base: Load Order Weight -200
  • Layout: Load Order Weight -100
  • Component: Load Order Weight 0
  • State: Load Order Weight 100
  • Theme: Load Order Weight 200

Example:

global-styling:
  css:
    base:
      css/reset.css: {}
    layout:
      css/layout.css: {}
    component:
      css/button.css: {}
    state:
      css/button-hover.css: {}
    theme:
      css/colors.css: {}

When Drupal processes these CSS files, it loads them based on their assigned weights. This ensures that foundational styles are loaded first, followed by layout structures, component-level styling, state changes, and finally visual theme adjustments. The result is a logical, layered approach to styling.

Side note: I’m also curious whether the intended behavior is for the site-specific theme’s CSS to override a library included in a custom paragraph template or not.

In general, yes a custom theme will override any module-provided assets by default. However, this behavior can be adjusted depending on how you define and attach libraries in your sub-theme.

Best wishes,
Alaa

drupaldope’s picture

drupaldope commented

Thank you so much for your comments, Alaa !

I'll continue to look for the cause, as I have made no changes in the subtheme, nor the site's theme.

amavi’s picture

amavi commented

Hi :)

Same me many many problem with CSS or first chargement of my page since 10.4.

Need to load 2 or 3 times pages for corect view, and some of my CSS personalize not here...

i have uncheck 2 options optimisation "Aggregate" in option Drupal, seem resolve problem of the first bad chargement. But on Phone all CSS is blocked, menu.... I need to come back version 10.3

You can see here:
https://anarkia333data.center/

flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
commented

Hello,

i have uncheck 2 options optimisation "Aggregate" in option Drupal, seem resolve problem of the first bad chargement

If this resolves the issue, it likely means the problem was caused by cached data. You'll need to clear both your Drupal caches and your browser cache to ensure all updates are properly reflected.

Best wishes,
Alaa

amavi’s picture

amavi commented

Yes I have do it. :)

Problem with all navigator, Edge, Opera, Chrome.... Impossible to active option "Agregation" or problem white page or CSS problem. Need to desactivate this 2 option.

Other problem I use "Hierarchical Taxonomy Menu" and menu no works now in Drupal 10.3.7.
All Java seem beak, Accordeon no works on Opera/Edge/Chrome phone, menu no works on Chrome Phone, deploy menu Taxonomy no works.... :(

Edit: I have try version 10.1.X and no problem, problem all Java break seem come with 10.2.0

flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
commented
Status: Active » Closed (outdated)

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.