CSS best practice: don't hard code font-weights

Development
#1

Good morning!

Context

When discussing @tkrieck 's proposal, I noticed that our CSS codestyle didn’t say to not hardcode values in CSS, but just: don't hard code colors in properties - use ColorTheme variables (use the up to date Flamingo ColoTheme variables). In my opinion, our policy should be a bit larger than that.

Proposal

A. Replace the CSS best practice on https://dev.xwiki.org/xwiki/bin/view/Community/CodeStyle/XhtmlCssCodeStyle/#HCSS

don’t hard code colors in properties - use ColorTheme variables (use the up to date Flamingo ColorTheme variables)

with an updated best practice:

Some properties must not be hardcoded. Instead they must use ColorTheme variables (use the up to date Flamingo ColorTheme variables). Those properties are:

  • Colors
  • Font weights

AND
B. Add three LESS variables to the Flamingo ColorTheme: @font-weight-regular, @font-weight-semibold and @font-weight-bold.

Conclusion

Here’s my +1 for these changes.

Do you agree with this proposal?

Lucas C.

#2

Why LESS variables? Wouldn’t it make more sense to use CSS variables (only) for any new properties we introduce?

+1 for the proposal in general. Thank you!

#3

+1 for the proposal
Also +1 to move from less variables to CSS variables (but that’s another proposal).

#4

For consistency with our current system. All of the other colorTheme variables are LESS. Both types of variables are not transposable unfortunately so I’d rather keep things consistent.

:+1:
It’s a broader discussion and moving from LESS to CSS variables comes with complications. None of the LESS utility functions work with CSS variables so we’d break a lot of user SSX if we switched without a proper migration or at least keeping a LESS fallback (which would come at a performance cost).

#5

Hey Lucas!

+1 on both the proposal and eventually moving our properties to CSS ones (even if this is not done right now).

One resource that I really liked is Shoelace’s definitions, you can see the typography section starting on line 374.
https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css

1 Like