Please change inline CSS to CSS classes #2736

New Issue

ao · 2022-08-06T06:17:10Z

ao commented

2022-08-06 06:17:10 +00:00

Pages including [1] include inline CSS. Please do not use style attributes to design an element. So instead of:

<p style="color: red;">text</p>

use CSS classes instead, or create them if necessary.

More information why this is bad style, and what to do instead:
https://wiki.fsfe.org/TechDocs/Mainpage/Editing/BestPractices#No_in-line_CSS

[1] activities/android/android.en.xhtml

Pages including [1] include inline CSS. Please do not use style attributes to design an element. So instead of: <p style="color: red;">text</p> use CSS classes instead, or create them if necessary. More information why this is bad style, and what to do instead: https://wiki.fsfe.org/TechDocs/Mainpage/Editing/BestPractices#No_in-line_CSS [1] activities/android/android.en.xhtml

ao added the

help wanted

design

labels 2022-08-06 06:17:11 +00:00

max.mehl commented

2022-08-09 09:54:16 +00:00

Thanks. I am not sure how we should track this in a ticket. It's a herculean task to replace all custom styles by CSS classes as most of them would not exist yet.

Please note that the pre-commit hooks check for such custom styles already and throw a warning, so this could be a motivation to look for replacements one by one. Especially graphics should be relatively easy to replace by the figures and their classes.

Thanks. I am not sure how we should track this in a ticket. It's a herculean task to replace *all* custom styles by CSS classes as most of them would not exist yet. Please note that the pre-commit hooks check for such custom styles already and throw a warning, so this could be a motivation to look for replacements one by one. Especially graphics should be relatively easy to replace by the figures and their classes.

delliott commented

2024-11-05 15:22:47 +00:00

Update from 2024:
we now have a tool ./tools/inline-css-finder.sh that gives us files with inbuilt style classes and inline styles

First style classes.
I think that removing \<style\> classes is probably the first thing to do. I have completed some work on this, and at the moment we only have style classes in

fsfe.org/about/timeline.??.xhtml
Which is fixed in #4337
fsfe.org/freesoftware/standards/eifv2-01.??.xhtml
which appears to be a draft version of fsfe.org/freesoftware/standards/eifv2.??.xhtml so it can probably just be removed.

I would also support altering tools/githooks/pre-commit so that having a \<style\> class is considered a critical issue rather than a warn.

Now for inline style. We have a lot of it, but most of it has been cargo culted between files, so its not quite as bad as it may appear.

Once it has been cleaned up we could make it a critical failure too. Do we think there are every scenarios it should be used?

Pinging @tobiasd as main maintainer atm.

Update from 2024: we now have a tool ./tools/inline-css-finder.sh that gives us files with inbuilt style classes and inline styles First style classes. I think that removing `\<style\>` classes is probably the first thing to do. I have completed some work on this, and at the moment we only have style classes in - `fsfe.org/about/timeline.??.xhtml` Which is fixed in https://git.fsfe.org/FSFE/fsfe-website/pulls/4337 - `fsfe.org/freesoftware/standards/eifv2-01.??.xhtml` which appears to be a draft version of `fsfe.org/freesoftware/standards/eifv2.??.xhtml` so it can probably just be removed. I would also support altering tools/githooks/pre-commit so that having a `\<style\>` class is considered a critical issue rather than a warn. Now for inline style. We have a lot of it, but most of it has been cargo culted between files, so its not quite as bad as it may appear. Once it has been cleaned up we could make it a critical failure too. Do we think there are every scenarios it should be used? Pinging @tobiasd as main maintainer atm.

Sign in to join this conversation.

No Milestone

No Assignees

3 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: FSFE/fsfe-website#2736