Refondre les classes utilitaires

[raphaelgoetter]

ping @PhilippeVay

[PhilippeVay]

• branche master : _library/_utilities.scss
• branche v8 : base/_utilities.scss

Note générale : je me sers de moins en moins de classes utilitaires au profit d'une approche par composants, façon :

/* components/_components.scss */
.component {
  .component-item {
    list-style-type: none;
    text-align: right;
  }
}

En plus de ça, inline-block et flottants sont de moins utiles, remplacés avantageusement par Flexbox voire Grid qui permettent en plus un meilleur alignement dans les 2 directions…

Dans ce qui suit (commentaires détaillés bloc par bloc), je note ✔️ pour ce dont je me suis servi ou dont je peux envisager avoir besoin.

Typo Helpers

• ✔️ .u-bold et .u-italic
• ✔️ .u-uppercase (je ne me sers pas de .u-lowercase mais par cohérence OK c'est nécessaire)
• .u-smaller, .u-small et .u-big, .u-bigger, .u-biggest : je voudrais l'utiliser mais c'est jamais le bon pourcentage… (contexte : j'intègre une maquette où les tailles de texte sont déjà définies,ce n'est pas au jugé)
• .u-txt-wrap : pourrait être utile même si d'habitude j'active ou pas pour toute la page. Je vois plus ça comme un snippet (une "recette" ?) et le principal intérêt est que je n'ai pas à tenter de suivre ce que font les specs et les différentes versions de navigateur avec les propriétés et les valeurs partout différentes : ce bout de code fera ce dont j'ai besoin
• .u-txt-ellipsis : idem snippet

text and contents alignment

• .txtleft, .u-txt-left et .txtright, .u-txt-right : déclaré en CSS chaque fois que nécessaire
• ✔️ .txtcenter, .u-txt-center

"Hyphens" sur mobile

?

blocks that need to be placed under floats

• .clear, .u-clear : c'est quoi ça un "flottant" ? 😛 (déclaré en CSS chaque fois que nécessaire)

blocks that must contain floats

• .clearfix, .u-clearfix : idem mais eh! indispensable dans un framework

simple blocks alignment

• .left(TYPO).u-left
• .right, .u-right
• .center, .u-center

Perso le nommage ne me dit toujours rien (trop vieille habitude des flottants et je ne pense pas de cette manière cet effet-là. Je "pousse" un élément vers quelque part, je ne l'"aligne" pas).
Tant que c'est en bonne place dans la doc, OK.

Global Micro Layout

module, gains superpower "BFC" Block Formating Context

• .mod, .u-mod, .bfc, .u-bfc

Je n'en ai plus l'utilité (mais c'était bien. 200+ gabarits avec des .mod partout, ça s'oublie pas 😃)

floating elements

• .fl, .u-fl
• img.fl, img.u-fl
• .fr, .u-fr
• img.fr, img.u-fr
• img.fl, img.fr, img.u-fl, img.u-fr

Idem je n'en ai plus l'utilité. Une image flottante ce sera dans un composant relativement complexe, pas forcément dans toutes les résolutions donc stylé via CSS.

inline-block

• .inbl, .u-inbl

Remplacé avantageusement par Flexbox voire Grid qui permettent en plus un meilleur alignement dans les 2 directions et n'ont pas de whitespace de 4px©

State Helpers

invisible for all

• ✔️ .is-hidden, .js-hidden, [hidden] Essentiel

hidden but not for an assistive technology like a screen reader, Yahoo! method

• ✔️ .visually-hidden J'ai également besoin de cet utilitaire actif dans certaines résolutions seulement (.small-visually-hidden). Via une mixin() comme on en a parlé IRL ce sera le plus simple

• ✔️ .is-disabled, .js-disabled, [disabled], .is-disabled ~ label, [disabled] ~ label On ne prévoit pas assez souvent ce cas

• ✔️ ul.is-unstyled, ul.unstyled Je le fais plus souvent en CSS mais c'est bien une des RÀZ que je fais le plus souvent voire systématiquement

• .color--inverse Sans déclarer de background, je ne m'en servirai pas : soit je fais les 2 en CSS, soit les 2 en HTML (et c'est en CSS pour l'instant) mais je souhaite éviter le mélange.

Width Helpers

Je ne m'en sers plus.
.w100 et .wauto peut-être encore un peu
.w960p ou .w1140p ne correspondent plus à aucun design

Spacing Helpers

Je me sers encore des RÀZ .m(trbl)0, padding aussi et les .(mp)(trbl)sml pas du tout.
Très récemment j'ai voulu appliquer une de ces RÀZ (width ou unstyled ou spacing je ne sais plus) et c'était inactif parce qu'écrasé par une règle de ma CSS, faute d'avoir un !important. Moins je me sers de classes utilitaires et moins je peux m'en servir ? :)

[KanorUbu]

Je ne sais pas si ça peut rentrer dans ce sujet. Mais j'ai remarqué un problème avec les class utilitaires c'est leur position dans le fichier final. Un exemple pour être plus claire si je place la class mls sur un champs input il n'aura aucun effet car on a définit un margin à 0 dans le fichier components/_forms.scss chargé après. Je pense que ce serait bien d'avoir le chargement de _library/utilities à la fin.

[raphaelgoetter]

C'est tellement pertinent que je vais transformer ta demande en issue :)

[raphaelgoetter]

Bon, j'ai fait du ménage dans les classes utilitaires.

Au final, il en reste encore pas mal puisque il semble difficile de dire "puisqu'on n'utilise plus les width et spacer helpers chez nous, on peut les supprimer"...

À moins de séparer ces classes utilitaires de priorité 2 dans un fichier séparé que l'on pourrait ne pas importer ?

[raphaelgoetter]

Il fallait s'y attendre, l'histoire continue... ailleurs...

Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.

Ce repo n'est plus maintenu est est dorénavant remplacé par celui de KNACSS Reborn : https://github.com/raphaelgoetter/knacss-reborn