choix framework CSS / isolation des CSS sur une page

wesh poussin
Les bases HTML/CSS

Hello,

je développe en ce moment un CMS que je compte rendre open source dès qu'il sera fonctionnel.

Côté serveur je me base sur Laravel et j'ai déjà bien avancé, par contre côté vue j'hésite encore entre différentes technos.
Je pense m'orienter sur Vue.js pour le javascript (qui a l'avantage d'être bien documenté et bien integré à Laravel).

Par contre pour le framework CSS mon coeur balance, je n'aime pas bootstrap que je trouve trop envahissant côté HTML (et trop répandu).
du coup j'hésite :

Avez-vous une experience ou un avis avec l'un de ces frameworks (ou un autre) ? en particulier avec Vue.js ?

/////////////

Une autre question :

je compte suivre une approche assez WYSIWYG avec des éléments de l'interface (boutons etc. dont l'apparence dépend du framework CSS) qui devraient venir s'afficher par dessus le contenu éditorial du CMS (qui ne dépend pas du framework mais du thème choisi par l'utilisateur) en le transformant le moins possible.

Avez-vous une idée d'une stratégie à suivre pour isoler les CSS, afin que les CSS de l'interface d'admin n'intéragissent pas avec ceux des contenus front et inverssement ?

Je pourrais éventuellement ajouter une classe "admin" sur tous les éléments de l'interface (au moins leur parents) et organiser un truc comme ça (SCSS) :

*:not(.admin) {
    // règles CSS pour le front     
    p {
    }
    input {
    }
    ....
}
.admin {
    // règles CSS pour l'interface
    input {
    }
}

mais ça me parait très très bancal, voir pas fonctionnel du tout...
l'idéal serait qu'il existe une règle pour supprimer toutes les règles héritées par l'élément admin pour lui-même et ses enfants, malheureusement je crois pas que ce soit le cas...

y aurait-il une bonne manière de faire ?

merci !

10 réponses

Kenor

"je n'aime pas bootstrap que je trouve trop envahissant côté HTML"
"Flat UI is a beautiful theme for Bootstrap."

ça t'en élimine un ;)

wesh poussin
Auteur

effectivement, merci :)

pour l'isolation des CSS j'ai trouvé ça :

.admin {
    all:revert;
}

https://www.w3.org/TR/css-cascade-4/#all-shorthand
https://www.w3.org/TR/css-cascade-4/#default

malheureusement la propriété all n'est pas implémetée dans IE ni Edge, et la valeur revert ne fonctionne que sous Safari.

donc en attendant j'imagine que la seule solution sera de reset salement un maximum de paramètres pour tous les éléments de l'interface.

mais en plus en fonction du framework CSS que je choisis, je vois pas trop comment appliquer les styles seulement aux éléments de mon interface... il faudrait un système de "scopes" CSS, et ça n'existe pas à ma connaissance...

Benjamin Derepas

Les scopes existent en CSS , mais uniquement en balise inline malheuresement .

Kenor

Essai de trouver un plugin webpack (ou gulp/grunt selon ce que tu utilises) afin de prefixer automatiquement ttes les règles de FW choisi ?
tu ferais un truc du genre ow-classname ... (ow comme owner)

Du scope CSS n'est possible qu'en combinant avec du JS, notamment avec react. J'avais lu un article ou 2 là dessus sur "putaindecode.io"

wesh poussin
Auteur

merci !

l'idée de prefixer est pas mal mais je pense que le mieux serait de "nester" : https://www.npmjs.com/package/scope-css .
en gros j'ajoute .admin avant chaque élément, vu que les selecteurs des FW CSS sont souvent des tags html type a, input etc. (c'est d'ailleurs ce que je préfère et ce que j'appelle "ne pas envahir le HTML" à moins que ce soit nécessaire évidemment).
ça pose un problème pour des éléments comme body ou html (qui ne sont pas inclus), et les effets des js peuvent toujours déborder sur la vue front, donc à voir à l'usage à quel point ça peut être gênant.

.admin {
    all:initial;
    * {
        all:initial;
    }
}

fonctionne sur de plus nombreux navigateurs, il manque surtout IE et Edge pour le moment mais ce n'est pas rédhibitoire (ça n'impactera que les administrateurs).

des articles assez clair (et en français) qui parlent de ça et des cascades CSS pour ceux que ça intéresse :
https://iamvdo.me/blog/la-cascade-css-inherit-et-initial
https://iamvdo.me/blog/la-cascade-css-avancee-all-initial-et-unset

le seul truc c'est que les div et autres éléments block deviennent des éléments inline, et il y a peut-être d'autres subtilités. donc encore des ajustements manuels un peu "hackeux" en perspective.

un jsfiddle : https://jsfiddle.net/u1079xy4/ on voit que les propriétés sont bien réinitialisées pour la div "admin block" (typo par défaut), par contre elle s'affiche en inline par défaut.

je suis donc pas très convaincu par ces solutions mais je vais tester tout ça, merci pour vos retours !

mirelle

salut je viens de créer un site http://www.le-decodeurtnt.com avec mes connaissances basics en html et css. j'aimerais avoir des documents sur le html le css et le php pour approfondir mes connaissances

wesh poussin
Auteur

salut mirelle
tu es sur le bon site et dans la bonne section, par contre tu devrais créer un nouveau sujet depuis cette page :
https://www.grafikart.fr/forum/htmlcss-4

je ne crois pas qu'il y ait beaucoup de formations CSS / HTML niveau débutant sur ce site.
en francophone il y aurait ça : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3
mais je n'ai pas essayé.

(merci de ne pas poursuivre la discussion ici, mais dans ton sujet)

Ayyur

Element UI un super framework complet basé sur VueJs.
Et là tout dépend de quel genre de framework tu cherche (Full Featured, Utile, modulable ....), pour ma part j'aime bien materializecss, mais il est imposant coté design à mon gout. bref y en a plein que je peux te conseiller, notament la nouvelle version de bootstrap, la version 4,
voici une liste des framework que je te conseil de voir avant de trancher

mxmaxime

Salut,
Je déconseille fortement Materializecss, ce framework n'est pas terminé à mon goût. Le support n'est pas au rendez-vous (2 ans pour gérer des petits bugs parfois...), au final obligé de fixer soi-même, sélecteurs css à rallonges horribles..
Très mauvaise expérience avec ce fw sur une plateforme assez conséquente.

wesh poussin
Auteur

merci pour vos avis et conseils, je vais étudier tout ça de près.

après avoir pas mal galéré à mettre en place un système personnalisé bancal, je viens de trouver ça pour les scopes CSS sour Vue :
https://vue-loader.vuejs.org/en/features/scoped-css.html
mais ça a l'air assez rudimentaire (utilisation de la balise style à mon avis pas adaptée à l'utilisation d'un framework CSS)

je vais donc tester tout ça dès que j'aurai le temps (je suis en plein déménagement) et je reviendrai faire un retour d'experience.