Webdesigner et css modulaire

Je me permet de poster ici car il y a eu une polémique sur le css entre le créateur de bluegriffon et l'article pourquoi j'ai arrêté d'utiliser CSS. L'article est intéressant car en fait tous les langages déclaratifs en fait ne fonctionne que parce qu'il y a un environnement dynamique qui utilise ces fichiers et l'auteur montre la logique du "parser" ( moteur css) en utilisant du code javascript .

Le problème vient de la connaissance des propriétés css qui s héritent ou pas et du poids provenant de la combinaison des différents type d'opérateur ( * > ..) et de sélecteurs ( !important , id ,class , pseudo element ...) .D'un point de vue javascript on dirait que les problèmes css viennent du scope : la porté, la zone ( flux ou stream en css ) dans laquelle la variable s'applique. En gros comme l'interface web s'impose dans le monde applicatif ( UI) , les développeurs backend faisant du front end sont inconfortable dans le développement web car

1-il n'existe pas d'outils visuels pour construire des interfaces par glisser / déposer .
Dreamweaver permet de glisser déposer visuellement du code HTML , des snippets ou des widgets des comportement ( behaviour) . Ce concept est plus avancé dans des IDE comme Microsoft VisualStudio qui s'est ouvert aux interfaces graphiques xml avec xaml /silverlight. Actuellement il semble que ce soit l ' outils cider qui permet de faire le design en mode xaml ( un peu comme un éditeur frontpage ,sharepoint avec html ...) .


2- javascript ES3 par défaut est global ( windows.variable sans parler des frames ) , n'a pas de vérification de type efficace ( ==, ===,typeof) et n'est pas modulaire par nature ( namespace , class , module ) et n'est donc pas structuré pour les grands projets (le code est très verbeux par rapport a un coffescript avec une syntaxe python) .
L'écriture du code javascript nécessite aussi beaucoups de rigueurs et connaissances ( arguments ,call, ...prototype..callback , IIFE ) car le javascript est laxiste permissif et pas encore assez standarisé ( ES2015 ->ES6 Harmony ) par rapport au langage "industriel" ( java, C) . Ainsi typescript, coffescript , flow sont la pour combler les défauts actuels du langage le temps que celui ci évolue par lui même selon les propositions .....

3-css à trop de concepts comme la spécificité , l' héritage et n'est pas modulaire .
L'écriture du code css nécessite une rigueur dans l'écriture des sélecteurs ( BEM.... ) et une façon de structurer ces fichiers ( "module") ( sass et the 7-1 pattern . Bootstrap est un début de réponse car a été développé historiquement pour faciliter le prototypage .

4-il n'existe pas de gestionnaire de projet efficace
Pour développer efficacement il faut des outils qui permettent d 'automatiser l'ensemble des taches : graphique , intéractivité , debug , test ( phantomjs) ,visualisation (browsersync) compilation pour tester ici dans un navigateur . Les gestionnaires loaders se retrouve dans les termes suivants : grunt ,gulp browserify , requirejs ,webpack :


5-la modularité permet la réutilisation des composants . Actuellement le fait que les modules existent sous différents formats ( syntaxes) font que cela n'est pas facile de les combiner rapidement efficacement ( cjs, umd, amd ...) . Le composant peut être du code ou un du code+graphique ( component web) . Ce concept de module est il me semble à l'origine du concept du module CSS et des shadow DOM : web component qui définissent le scopes du codes JS HTML CSS .....

Au final le code généré sera toujours du javascript et du css d'ou la nécessité lors de l utilisation de processeur ( sass , typescript/babel ) d'utiliser un mapping comme sourcemap !!
Dans le contexte d'une application web ; l 'utilisation de REST json et AJAX sont souvent présent et quelques soient les Frameworks utilisés ceux ci doivent être réactifs au niveau de la gestion des évènements ( MVC routing...) . Une application Web doit fonctionner sur tous les navigateurs . ainsi Jquery est l'ancêtre de ce concept d'application en proposant une API qui élimine les disparités de fonctionnement entre les différents navigateurs .
React propose sa propre gestion des évènements avec la création d'un virtual DOM propre et du code html/css dans un fichier javascript . IL faut donc utiliser bien connaître javascript ( bind()) et les librairies tiers qui seront à utiliser pour faire aboutir le projet (DRY) .
Angular se focalise sur son moteur qui interprête les attributs/Value propre a Angular ( ng-*=" aa bb") dispersé a l'intérieur des balises ouvrante HTML pour y injecter des fonctionnalités . Angular propose de façon obligatoire un grand nombre de librairies ce qui en fait un Framework ( je pense qu'il doit bien exister pour angular un bootstrap customize ? )
Meteor est un des frameworks disponibles parmis d' autres dans le monde javascript/node/npm . Ce trio coté Desktop combiné au framework chromium a donné naissance à electron/visualcode et atom . Je ne sais pas pour bracket. Atom et Visualcode sont plus des "IDE" ouvert sur le web et les applications web en supportant typescript et php par rapport à bracket qui se limite à la partie client web ......

Mon avis est que quelleque soit la façon de coder il faut en codant CSS :
-partir d'un design graphique ( photoshop , fireworks , illustrator)
-maitriser CSS : spécificité , display et data-*
-visualiser en temps réel selon différents contextes : langues ( image texte adaptés) , largeur d'écran ( Mediaquery) , densité d'écran.

J'espère avoir fait un peu le tour de la question en complétant remettant le tutoriel angular2 sur le forum alsacréation dans son contexte que j'ai un peu beaucoups pollué par mes nombreux posts par manque de connaissance du sujet .

Sinon pour terminer , le post utiliser un lecteur de vidéo universelle permet d'explorer les shadow DOM avec les termes chromecast , videojs , HTML5 video tag , canary . En Effet la balise HTML vidéo est un composant a lui tout seul car cette balise affiche plusieurs contrôleurs ( play stop ) associés à une interface de visualisation ( zone d'affichage de l'image) et de rendu auditif ( haut parleur) avec support de la publicité ( pre post roll ) , gestion des playlists ......... adaptable par du code javascript et css !!!

Espère que cette introduction sera compréhensible par les débutants.
NB un de mes posts sur ke forum alsacréations( prêt à porter ) était en relation avec l'étude d'un site ou tout était gérer par javascript !!

Cordialement
Modifié par 75lionel (20 Oct 2016 - 20:26)

75lionel a écrit :
Je me permet de poster ici car il y a eu une polémique sur le css entre le créateur de bluegriffon et l'article pourquoi j'ai arrêté d'utiliser CSS. L'article est intéressant car en fait tous les langages déclaratifs en fait ne fonctionne que parce qu'il y a un environnement dynamique qui utilise se fichier et l'auteur montre la logique du "parser" ( moteur css) en utilisant du code javascript.

Après avoir lu les deux articles en question, je crois qu'il y a surtout deux gros egos qui s'affrontent, chacun ayant sa part de vérité .
Le ton de l'article initial est pour le moins péremptoire et nous invite à sortir l'enclume pour écraser une mouche, partant d'une argumentation qui n'est pas totalement fausse, mais sur un ton et avec des certitudes qui discréditent le discours.
Que bloodyowl ait une réaction épidermique envers CSS est une chose, qu'il érige sa solution basée sur JS en dogme absolu en est une autre.
Quant à Glazman, bin c'est du... Glazman.
Ce gars a un parcours reconnu, certes, mais pour avoir parcouru un tantinet sa prose sur son blog à une époque, j'avoue être plus que dubitatif sur la modestie du personnage.
Son éditeur HTML Blue Griffon ne m'a par ailleurs pas convaincu, et c'est peu dire.
Installé, testé et abandonné dans la foulée...

Lol l'article à buzz de hater. La section ou il injecte son CSS inline grâce au JS à failli me faire recracher mon premier café ! Quand les dev back se mêlent de l'UI... j'ai les même dans ma boite hahaha ! Merci pour le troll du matin c'était fun, je vais prendre mon second café

J'avais lu l'article à sa sortie mais bon...

1/ J'ai tendance à écrire du CSS au kilomètre pourtant, depuis quelques années (l'expérience aidant), je n'ai plus de souci de scope. Il faut juste maîtriser son truc : se servir d'une classe comme namespace, etc.

2/ Et surtout : les commentaires ont souligné que le process décrit par l'article est plutôt dédié à certains projets - comme des applications -, ce qui n'est pas clair dans l'article lui-même.

@sepecat , bluegriffon a de nombreux points intéressants et je suis sur que s''il se rapproche de l'outil dont je vous propose 2 videos; l 'outils sera exceptionnel .
-l'un d'un designer 100% adobe fireworks
-l'autre de deux compères expert css .

Quand a gazou a non pas celui ci ( erreur typographie) ..celui la glazou , il s' est exprimé en français explicitement dans une vidéo en français de 45 minutes contre les shadow DOM et les webcomponents (angular/React)au cours de Web2day ayant pour sujet "The third browser war is over and it's a bloodshed 2016 ". Ci joint les liens directes sur la timeline a propos de Angular et React. Concernant la discussion sur Gmail , la vidéo confirme mon post sur alsa création a propos de sparow tuer par Gmail ( que je n'ai jamais utilisé) . Histoire a rebondissement relaté dans macg. Le but des créateurs de start up sera à moment ou un autre de racheter les concurrents ou de négocier la vente de leur société ( achat + statut salarié) .

Après étude pendant plusieurs mois de tout cet éco système . Je vais vite oublier REACT et Angular et me contenter de mes CMS , gulp et sass , jquery , knockout/vuejs . Les Web applications n'ont d'intérêt que dans le partage des données ( community, share) par l'utilisation d'un serveur externes accessible 24h/24h . Ce concept permet aussi aux SSII ( microsoft adobe) d'avoir une rente en obligeant leurs clients à louer leurs logiciels plutôt qu'a les acheter et les installer localement ( clé de licence ou key ).
...Adobe n'a fait actuellement ( 2016) que conditionné l' utilisation de sa suite de logiciel desktop à un compte internet pour vérifier que l' utilisateur est bien enregistré , possède une clé et est à jour de sa cotisation. Pour la suite CS6 ; l'enregistrement et la clé sont nécessaire mais pas la cotisation .
...J'espère que les applications web adobe seront aussi rapide et efficace qu'une application desktop natif. Gazou dans la vidéo dit qu'un binaire sera toujours aussi rapide qu'un javascript ( a quand un compilateur javascript text -> binaire ) . Mon "avis" ce résumera sur cette constatation : comment se fait t il que serif arrive en si peu de temps a développer affinity designer sous Mac OS dont les qualités et fonctionnalités semblent bien plus importante que les mêmes outils commercialisés depuis longtemps pour la plateforme Microsoft ( serifdraw plus) même si le portage sur windows est en béta !

Le worflow actuel est donc designer ( png psd ai)-> intégrateur web ( css js) -> integrateur php ( CMS)

Cordialement
Modifié par 75lionel (20 Oct 2016 - 20:06)

Mon grain de sel : la spécificité et l'héritage, et par extension la cascade, sont des concepts clés de CSS pour nous faciliter la vie.

Pour ceux du fond qui n'ont pas compris : si nous n'avions pas ça, nous devrions décrire précisément l'apparence du moindre élément. Alors, vous pensez toujours que l'héritage c'est un problème, dans CSS ?

Vous vous voyez sérieusement ajouter un font-family à chacun de vos sélecteurs, vous ?

Les deux personnes citées sont extrêmement compétentes, ont des arguments pertinents et intéressants et des avis pour le moins tranchés. Cela ne veut pas dire qu'on doive les croire sur parole ou suivre leurs conseils, seulement les respecter et tenter de nous faire une opinion critique de à l'aide de leurs argumentaires respectifs.

Sinon pour creuser la question, je vous invite également à découvrir la solution proposée par Thierry Koblentz, Atomic CSS. C'est encore une autre approche, mais elle a également des arguments à défendre

Ten a écrit :

Les deux personnes citées sont extrêmement compétentes, ont des arguments pertinents et intéressants et des avis pour le moins tranchés. Cela ne veut pas dire qu'on doive les croire sur parole ou suivre leurs conseils, seulement les respecter et tenter de nous faire une opinion critique de à l'aide de leurs argumentaires respectifs.

Moui, je suis pas sur qu'il cherche a être pertinent quand je lis ce genre de choses :

a écrit :

CSS est un langage horriblement dangereux, parce qu'il mêle des concepts complètement pétés et une folle capacité à faire confondre facilité et simplicité aux gens qui l'utilisent.

Et je comprend que ça fasse bondir beaucoup de monde le genre de postulats sophistiques. Après le monsieur à l'air d'avoir des besoins très spécifiques qu'il ne contextualise pas du tout dans son article mais on est pas dans sa tête. Ça reste pour moi un avis non éclairé, dans l'état, même si dans son contexte à lui ça a surement du sens.

Perso je trouve que l'imbrication qu'on trouve dans les préprocesseurs résout une grande partie des problèmes d'héritage et fonctionne plutôt bien dans la réalisation de site web classiques où l'on a besoin de faire de la réutilisation. Ça se complique lorsqu'on se retrouve avec des thèmes ou des modules et plugins provenant de multiples endroits et donc des milliers de règles CSS dont on a généralement pas idée de la totalité des éléments auxquelles elles sont appliquées.

Même si dans l'absolu on peut tout faire avec class et ID, ça pourrait être certainement évoluer vers du mieux en introduisant des concepts comme les espaces de nom ou autre contraintes un peu plus drastique permettant de cloisonner certains éléments à styliser. Comme, par exemple, un bouton suivant/précédent présent dans un diaporama ne devrait jamais venir interférer sur des éléments extérieur. Mais dans tout les cas ça passera toujours pas de la rigueur individuelle et donc il y aura toujours un peu de bazar quelque soit les évolutions d'HTML/CSS (Petite pensée à ceux qui mettent des importants pour écraser leur propres règles CSS )