Use CSS layers for implementing utility classes #12298

New Issue

GiteaMirror · 2025-11-02T10:04:49-06:00

GiteaMirror commented

2025-11-02 10:04:49 -06:00

Originally created by @rafh on GitHub (Jan 5, 2024).

Feature Description

Gitea has a helper.css file with a host of utility classes. However, they use important!. Instead, have we thought about using CSS layers? Here's a quick example of what I have in mind.

/* We would need to remove fomantic from webpack and add it to the CSS file */
/* Notice it is a named called framework */
@import url("../fomantic/build/semantic.css") layer(framework);

/* Custom utilities that don't need the use of important */
@layer utilities {
  .gt-mt-0 { margin-top: 0; }
  .gt-font-light { font-weight: var(--font-weight-light); }
  .gt-relative { position: relative; }
}

/* Here we order the layers in the order we want them to be in the final CSS file */
@layer framework, utilities;

CSS layers are well supported: https://caniuse.com/css-cascade-layers

Originally created by @rafh on GitHub (Jan 5, 2024). ### Feature Description Gitea has a `helper.css` file with a host of utility classes. However, they use `important!`. Instead, have we thought about using CSS layers? Here's a quick example of what I have in mind. ```CSS /* We would need to remove fomantic from webpack and add it to the CSS file */ /* Notice it is a named called framework */ @import url("../fomantic/build/semantic.css") layer(framework); /* Custom utilities that don't need the use of important */ @layer utilities { .gt-mt-0 { margin-top: 0; } .gt-font-light { font-weight: var(--font-weight-light); } .gt-relative { position: relative; } } /* Here we order the layers in the order we want them to be in the final CSS file */ @layer framework, utilities; ``` CSS layers are well supported: https://caniuse.com/css-cascade-layers

GiteaMirror added the type/proposal issue/needs-feedback labels 2025-11-02 10:04:49 -06:00

GiteaMirror closed this issue

2025-11-02 10:04:49 -06:00

GiteaMirror commented

2025-11-02 10:04:50 -06:00

@wxiaoguang commented on GitHub (Jan 6, 2024):

It seems pretty new. I guess it would break some browsers like https://github.com/go-gitea/gitea/pulls?q=is%3Apr+palemoon+is%3Aclosed

@wxiaoguang commented on GitHub (Jan 6, 2024): It seems pretty new. I guess it would break some browsers like https://github.com/go-gitea/gitea/pulls?q=is%3Apr+palemoon+is%3Aclosed

GiteaMirror commented

2025-11-02 10:04:50 -06:00

@rafh commented on GitHub (Jan 9, 2024):

@wxiaoguang according to the Gitea docs, we are covered. Gitea only supports the last 2 versions of Chrome, Firefox, Safari, and Edge. These versions have implemented CSS layers.

@rafh commented on GitHub (Jan 9, 2024): @wxiaoguang according to the Gitea docs, we are covered. Gitea only [supports](https://docs.gitea.com/1.20/?_highlight=br#browser-support) the last 2 versions of Chrome, Firefox, Safari, and Edge. These versions have implemented [CSS layers](https://caniuse.com/css-cascade-layers).

GiteaMirror commented

2025-11-02 10:04:50 -06:00

@wxiaoguang commented on GitHub (Jan 9, 2024):

@wxiaoguang according to the Gitea docs, we are covered. Gitea only supports the last 2 versions of Chrome, Firefox, Safari, and Edge. These versions have implemented CSS layers.

Theoretically, I could agree. But personally I haven't found a reason to introduce CSS layers soon.

CSS layers could be more modern, while!important also works and doesn't bring real problems at the moment.
CSS layers could break some users, while !important just works.
There are far more other problems in Gitea's frontend than !important problem, while these more important problems could have higher priority.

@wxiaoguang commented on GitHub (Jan 9, 2024): > @wxiaoguang according to the Gitea docs, we are covered. Gitea only [supports](https://docs.gitea.com/1.20/?_highlight=br#browser-support) the last 2 versions of Chrome, Firefox, Safari, and Edge. These versions have implemented [CSS layers](https://caniuse.com/css-cascade-layers). Theoretically, I could agree. But personally I haven't found a reason to introduce CSS layers soon. * CSS layers could be more modern, while`!important` also works and doesn't bring real problems at the moment. * CSS layers could break some users, while `!important` just works. * There are far more other problems in Gitea's frontend than `!important` problem, while these more important problems could have higher priority.

GiteaMirror commented

2025-11-02 10:04:50 -06:00

@kdumontnu commented on GitHub (Mar 20, 2024):

@wxiaoguang according to the Gitea docs, we are covered. Gitea only supports the last 2 versions of Chrome, Firefox, Safari, and Edge. These versions have implemented CSS layers.

Theoretically, I could agree. But personally I haven't found a reason to introduce CSS layers soon.
* CSS layers could be more modern, while`!important` also works and doesn't bring real problems at the moment.

* CSS layers could break some users, while `!important` just works.

* There are far more other problems in Gitea's frontend than `!important` problem, while these more important problems could have higher priority.

What would you say is more important than !important at the moment that can be improved? We have had issues with !important taking precedence over styles and generally polluting the code-base.

Now that we support tailwind, shouldn't we start deprecating the helper.css functions, or am I misunderstanding?

@kdumontnu commented on GitHub (Mar 20, 2024): > > @wxiaoguang according to the Gitea docs, we are covered. Gitea only [supports](https://docs.gitea.com/1.20/?_highlight=br#browser-support) the last 2 versions of Chrome, Firefox, Safari, and Edge. These versions have implemented [CSS layers](https://caniuse.com/css-cascade-layers). > > Theoretically, I could agree. But personally I haven't found a reason to introduce CSS layers soon. > > * CSS layers could be more modern, while`!important` also works and doesn't bring real problems at the moment. > > * CSS layers could break some users, while `!important` just works. > > * There are far more other problems in Gitea's frontend than `!important` problem, while these more important problems could have higher priority. What would you say is more important than `!important` at the moment that can be improved? We have had issues with `!important` taking precedence over styles and generally polluting the code-base. Now that we support tailwind, shouldn't we start deprecating the `helper.css` functions, or am I misunderstanding?

GiteaMirror commented

2025-11-02 10:04:50 -06:00

@wxiaoguang commented on GitHub (Mar 21, 2024):

What would you say is more important than !important at the moment that can be improved? We have had issues with !important taking precedence over styles and generally polluting the code-base.

Yup, that's one of the root problems. These !important rules are written intentionally to globally override other global styles (from Fomantic UI, or from Gitea's old bad design). If you would like to use CSS layer to replace, then it might need a "globally polluting" CSS layer to override other global styles (just like before?). I don't see much difference at the moment.

If you think CSS layer could really help about the global overriding/polluting, could you help to propose a simple demo about how to implement it?

Now that we support tailwind, shouldn't we start deprecating the helper.css functions, or am I misunderstanding?

Yup, the deprecating has started, it also needs a lot of work, helping to migrate the styles is very appreciated. So IMO the first step is to clearly deprecate the helper.css , instead of introducing a new approach too soon.

@wxiaoguang commented on GitHub (Mar 21, 2024): > What would you say is more important than `!important` at the moment that can be improved? We have had issues with `!important` taking precedence over styles and generally polluting the code-base. Yup, that's one of the root problems. These `!important` rules are written intentionally to globally override other global styles (from Fomantic UI, or from Gitea's old bad design). If you would like to use CSS layer to replace, then it might need a "globally polluting" CSS layer to override other global styles (just like before?). I don't see much difference at the moment. If you think CSS layer could really help about the global overriding/polluting, could you help to propose a simple demo about how to implement it? > Now that we support tailwind, shouldn't we start deprecating the `helper.css` functions, or am I misunderstanding? Yup, the deprecating has started, it also needs a lot of work, helping to migrate the styles is very appreciated. So IMO the first step is to clearly deprecate the `helper.css` , instead of introducing a new approach too soon.

GiteaMirror commented

2025-11-02 10:04:50 -06:00

@kdumontnu commented on GitHub (Mar 21, 2024):

What would you say is more important than !important at the moment that can be improved? We have had issues with !important taking precedence over styles and generally polluting the code-base.

Yup, that's one of the root problems. These !important rules are written intentionally to globally override other global styles (from Fomantic UI, or from Gitea's old bad design). If you would like to use CSS layer to replace, then it might need a "globally polluting" CSS layer to override other global styles (just like before?). I don't see much difference at the moment.

If you think CSS layer could really help about the global overriding/polluting, could you help to propose a simple demo about how to implement it?

Thanks, I understand the concern a bit more. We can take a look at a demo, but sounds like starting on the issue below makes more sense initially.

Now that we support tailwind, shouldn't we start deprecating the helper.css functions, or am I misunderstanding?

Yup, the deprecating has started, it also needs a lot of work, helping to migrate the styles is very appreciated. So IMO the first step is to clearly deprecate the helper.css , instead of introducing a new approach too soon.

Excellent. Totally agree. We can help with that effort.

@kdumontnu commented on GitHub (Mar 21, 2024): > > What would you say is more important than `!important` at the moment that can be improved? We have had issues with `!important` taking precedence over styles and generally polluting the code-base. > > Yup, that's one of the root problems. These `!important` rules are written intentionally to globally override other global styles (from Fomantic UI, or from Gitea's old bad design). If you would like to use CSS layer to replace, then it might need a "globally polluting" CSS layer to override other global styles (just like before?). I don't see much difference at the moment. > > If you think CSS layer could really help about the global overriding/polluting, could you help to propose a simple demo about how to implement it? Thanks, I understand the concern a bit more. We can take a look at a demo, but sounds like starting on the issue below makes more sense initially. > > Now that we support tailwind, shouldn't we start deprecating the `helper.css` functions, or am I misunderstanding? > > Yup, the deprecating has started, it also needs a lot of work, helping to migrate the styles is very appreciated. So IMO the first step is to clearly deprecate the `helper.css` , instead of introducing a new approach too soon. Excellent. Totally agree. We can help with that effort.

GiteaMirror commented

2025-11-02 10:04:51 -06:00

@GiteaBot commented on GitHub (Apr 21, 2024):

We close issues that need feedback from the author if there were no new comments for a month. 🍵

@GiteaBot commented on GitHub (Apr 21, 2024): We close issues that need feedback from the author if there were no new comments for a month. :tea:

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#12298