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...