Refactoriser le CSS avec LessCSS #97

Closed
opened 1 year ago by Darks · 6 comments
Darks commented 1 year ago
Owner

Actuellement le CSS est immaintenable. Y'a des fichiers partout, on ne sait pas trop qu'est-ce qui contient quoi, et surtout on a un fichier responsive.css qui rend l'ajout de règles supplémentaires un enfer.

L'idée est de passer sur LessCSS (ou une solution plus KISS, à voir), permettant d'utiliser une syntaxe imbriquée. Par exemple

.component {
  width: 300px;
  @media (min-width: 1280px) {
    width: 800px;
  }
  
  .subcomponent > input {
     color: var(--background);
  }
}

La gestion des thèmes reste inchangée grâce à l'utilisation de fichiers themes.css contenant des variables CSS3.

D'un point de vue technique, je suis parti dans un premier temps sur LessCSS car c'est un outil que je connais (dans le sens, je sais qu'il existe). Si un autre outil propose les mêmes fonctionnalités et s'avère être plus pratique à utiliser, autant passer dessus.

La création d'un makefile qui build le CSS est selon moi nécessaire, afin que l'on automatise la création du CSS final que ce soit pour les besoins du développement ou coté CD.

Actuellement le CSS est immaintenable. Y'a des fichiers partout, on ne sait pas trop qu'est-ce qui contient quoi, et surtout on a un fichier `responsive.css` qui rend l'ajout de règles supplémentaires un enfer. L'idée est de passer sur LessCSS (ou une solution plus KISS, à voir), permettant d'utiliser une syntaxe imbriquée. Par exemple ``` .component { width: 300px; @media (min-width: 1280px) { width: 800px; } .subcomponent > input { color: var(--background); } } ``` La gestion des thèmes reste inchangée grâce à l'utilisation de fichiers `themes.css` contenant des variables CSS3. D'un point de vue technique, je suis parti dans un premier temps sur [LessCSS](https://github.com/lesscpy/lesscpy) car c'est un outil que je connais (dans le sens, je sais qu'il existe). Si un autre outil propose les mêmes fonctionnalités et s'avère être plus pratique à utiliser, autant passer dessus. La création d'un makefile qui build le CSS est selon moi nécessaire, afin que l'on automatise la création du CSS final que ce soit pour les besoins du développement ou coté CD.
Darks added the
performance
label 1 year ago
Darks self-assigned this 1 year ago

La version Python du compilateur : https://github.com/lesscpy/lesscpy

Note que je trouve la séparation en fichiers pas si mal, comparée à la v4.3 c'est un délice par exemple. Je propose de rester à peu près sur la même répartition des règles, si ça te paraît pas absurde.

La version Python du compilateur : https://github.com/lesscpy/lesscpy Note que je trouve la séparation en fichiers *pas si mal*, comparée à la v4.3 c'est un délice par exemple. Je propose de rester à peu près sur la même répartition des règles, si ça te paraît pas absurde.

Je vais faire une passe sur lesscpy pour voir si je peux ajouter le support des variables CSS4.

Je vais faire une passe sur lesscpy pour voir si je peux ajouter le support des variables CSS4.

Ma foi, à part une subtilité dans le lexer il n'y avait pas de problème particulier. (?)

% cat mytests/css4vars.less
div {
  color: green;
  --bg: red;
}

:root {
  --bg: #e0e0e0;
}

p {
  --bg: white;
}

* {
  background: var(--bg);
  color: var(--fg, var(--text-fg, black));
}

div {
  span {
    --bg: purple;
    background: var(--bg);
  }
}
% python3 -m lesscpy mytests/css4vars.less mytests/css4vars.css
% cat mytests/css4vars.css
div {
  color: green;
  --bg: red;
}
:root {
  --bg: #e0e0e0;
}
p {
  --bg: white;
}
* {
  background: var(--bg);
  color: var(--fg,var(--text-fg,black));
}
div span {
  --bg: purple;
  background: var(--bg);
}                                                                                                                                      el@realm in ~/git/lesscpy on master!
Ma foi, à part une subtilité dans le lexer il n'y avait pas de problème particulier. (?) ``` % cat mytests/css4vars.less div { color: green; --bg: red; } :root { --bg: #e0e0e0; } p { --bg: white; } * { background: var(--bg); color: var(--fg, var(--text-fg, black)); } div { span { --bg: purple; background: var(--bg); } } ``` ``` % python3 -m lesscpy mytests/css4vars.less mytests/css4vars.css ``` ``` % cat mytests/css4vars.css div { color: green; --bg: red; } :root { --bg: #e0e0e0; } p { --bg: white; } * { background: var(--bg); color: var(--fg,var(--text-fg,black)); } div span { --bg: purple; background: var(--bg); } el@realm in ~/git/lesscpy on master! ```

Alright du coup j'ai soumis tout ça en PR et ça été fusionné presque immédiatement. Il suffit de pull la source sans maintenir un dépôt à part. Ça devrait débloquer le travail ici !

Alright du coup j'ai soumis tout ça en PR et ça été [fusionné presque immédiatement](https://github.com/lesscpy/lesscpy/pull/117). Il suffit de pull la source sans maintenir un dépôt à part. Ça devrait débloquer le travail ici !
Darks referenced this issue from a commit 1 year ago
Darks referenced this issue from a commit 1 year ago
Poster
Owner

Pour la compilation du CSS, je suis parti sur un fonctionnement manuel. Le but est de ne pas pénaliser les contrubuteurs qui n'ont pas envie d'installer Less sur leur machine.

Le makefile ajouté permet de faciliter la gestion de cette compilation :

  • make css compile les fichiers Less qui ont été modifiés
  • make run compile le CSS puis lance flask run

Les fichiers appelés par le HTML sont toujours dans app/static/css. Il faut penser à les ajouter au commit si on touche aux sources Less :

  1. Faire ses modifs
  2. Compiler
  3. Ajouter au commit les fichiers Less et les CSS produits
Pour la compilation du CSS, je suis parti sur un fonctionnement manuel. Le but est de ne pas pénaliser les contrubuteurs qui n'ont pas envie d'installer Less sur leur machine. Le makefile ajouté permet de faciliter la gestion de cette compilation : - `make css` compile les fichiers Less qui ont été modifiés - `make run` compile le CSS puis lance `flask run` Les fichiers appelés par le HTML sont toujours dans `app/static/css`. Il faut penser à les ajouter au commit si on touche aux sources Less : 1. Faire ses modifs 2. Compiler 3. Ajouter au commit les fichiers Less et les CSS produits
Poster
Owner

PR fusionnée, doc ajoutée, je ferme ce ticket

[PR fusionnée](https://gitea.planet-casio.com/devs/PCv5/pulls/102), [doc ajoutée](https://gitea.planet-casio.com/devs/PCv5/wiki/19-CSS-et-th%C3%A8mes-additionnels), je ferme ce ticket
Darks closed this issue 1 year ago
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: devs/PCv5#97
Loading…
There is no content yet.