Please change inline CSS to CSS classes #2736

Open
opened 2022-08-06 06:17:10 +00:00 by ao · 2 comments
Member

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
Owner

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.
Contributor

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
No description provided.