Pertinence de pratiques Web Dev

Bonjour / bonsoir,

Cela fait maintenant presque une demi année que je me suis mit au développement web en autodidacte et je commence a avoir des habitudes et des pratiques régulières - empruntées de diverses sources ou mise en place à force d'expériences et de tests divers.

Je me suis donc inscris sur cette plateforme et je viens vers vous pour avoir des avis externes et si possible de personnes qualifiées, sur quelques unes de mes nouvelles pratiques.

M'orientant de plus en plus vers une structure "CMS/FrameWork-isante" faite maison, j'ai commencé à employer les supers globales PHP "$_SESSION" et "$GLOBALS" pour regrouper diverses informations récurrentes dans mes pages, que je stock ensuite dans des variables à noms plus courts ; optimisant mon temps de travail une fois mit en place.
J'initie aussi l'automatisation de l'écriture de certains types de lignes en employant des fonctions - typiquement les liens vers les CSS. Aussi j'ai débuté la conversion de mes CSS en fichiers PHP, interprétés en CSS par les navigateurs.

Voici par exemple la base d'une de mes feuilles de structure, que j’inclue au début de chaque page ; appelée "globals.php" :

/* ------------------------ OPTION SELECT -----------------------*/
$css_extension = '.php';

/* ---------------------------- BASE ----------------------------*/
$_SESSION['root'] = htmlspecialchars($_SERVER['DOCUMENT_ROOT']);
$d__root = htmlspecialchars($_SESSION['root']);

//securisation level preference
$h__select = 'https';
$_SESSION['httph'] = $h__select . '://' . htmlspecialchars($_SERVER['HTTP_HOST']);
$httph = htmlspecialchars($_SESSION['httpsh']);

/* ------------------------- STRUCTURE -------------------------*/
$_SESSION['root_strc'] = $d__root . '/design/strc/';
$d__strc = htmlspecialchars($_SESSION['root_strc']);

$_SESSION['link_css'] = $httph . '/design/css/';
$h__css = htmlspecialchars($_SESSION['link_css']);

$_SESSION['link_fnt'] = $httph . '/design/fnt/';
$h__fnt = htmlspecialchars($_SESSION['link_fnt']);

$_SESSION['link_img'] = $httph. '/design/img/';
$h__img = htmlspecialchars($_SESSION['link_img']);

$_SESSION['link_vid'] = $httph . '/design/vid/';
$h__vid = htmlspecialchars($_SESSION['link_vid']);

/* -------------------- ACTIVE FILE PATHS ---------------------*/
$d__here = htmlspecialchars($_SERVER['PHP_SELF']);
$uri = htmlspecialchars($_SERVER['REQUEST_URI']);

/* -------------------- ACTIVE FILE NAMES ---------------------*/
$a__name = substr($d__here, strrpos($d__here, '/') + 1, strlen($d__here) - strrpos($d__here, '/'));
$a__shortname = substr($a__name, 0, strlen($a__name) - strrpos($a__name, '.') + 1);
$a__nametocss = $a__shortname . $css_extension;

/* ----------------------- USEFUL PATHS -----------------------*/
$h__csself = $h__css . 'style_' . $a__nametocss;

/* --------------------- USEFUL FUNCTIONS ---------------------*/
function printStyle($style_name) {
    global $h__css, $css_extension;
    echo '<link rel="stylesheet" type="text/css" href="' . $h__css . $style_name . $css_extension . '" />';
}

ainsi qu'une feuille typique de ma structure CSS fondamentale ; appelée "style.php" :

<?php
header('content-type: text/css');
ob_start('ob_gzhandler');
header('Cache-Control: max-age=31536000, must-revalidate');
?>

/* ------------------------------ CSS PRESET ------------------------------ */
* { font-family:<?php echo $txt__b_font; ?>; color:<?php echo $txt__b_color; ?>; margin:0; padding:0; box-sizing:border-box; }

//min page size 100% x 100% window size
html { width:100vw; max-width:100%; }
body { width:100%; min-height:100vh; }

//boxes to block
div, section, aside, button, i { display:block; }

//text boxes to inline-block
span, em, article, b, strong, p, a { display:inline-block; }

//button style reset
button { border:none; background:none; color:black; }

//links style
a { color:<?php echo $txt__b_color; ?>; }
a:link { color:inherit; }
a:visited { color:grey; }
a:hover { color:<?php echo $txt__sec_color; ?>; }
a:active {  }

//les variables PHP sont stockées dans une autre feuille appelée "g_style.php", et sont des raccourcis pointant vers des $GLOBALS associées.

et un "head.php" classique donne ceci :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta rel="canonical" href="url_canonique">

<title>titre</title>

<meta name="description" content="description" />

<?php printStyle('style'); printStyle('g_style'); printStyle('head_style'); printStyle('footer_style'); ?>

<link rel="stylesheet" type="text/css" href="<?php echo $h__csself; ?>">

<!-- "head.php" est incluse dans la balise <head> dans la feuille "index.php", située à la racine du domaine -->

J'aimerais donc beaucoup avoir des retours sur mes décisions, afin de m'éviter un possible dés-apprentissage ultérieur ; obligatoire si mauvaises pratiques.
Modifié par Moltenhead (27 Oct 2017 - 01:26)

Salut,

J'ai lu en z ton code. Les variables globales, comment dire ... ? C'est franchement dégueu.... (paye tes problèmes de collisions...)

Je pense que tu as oublié cette notion. Je t'invite à lire ou à relire la doc sur le sujet.

D'autre part les css sont souvent faites en dur avec des chemins relatifs, je suis pas certains qu'avoir des variables php apporte grand chose. Si tu veux vraiment améliorer ton workflow pour les css, tournes toi vers SASS ou LESS.

Oui et puis non : du php qui s'exécute à chaque chargement de page pour produire du css... Au secours quoi.

bzh a écrit :
D'autre part les css sont souvent faites en dur avec des chemins relatifs,

nop ! le chemin d'un fichier front est souvent appelé en absolu ! Pourquoi ? l'url rewriting/vhost/etc.

bzh a écrit :
Si tu veux vraiment améliorer ton workflow pour les css, tournes toi vers SASS ou LESS.

+1 pour SASS

Olivier C a écrit :
du php qui s'exécute à chaque chargement de page pour produire du css... Au secours quoi.

+1 On ne mélange pas le back et le front. Chaque couche doit avoir sa propre abstraction !
Modifié par niuxe (27 Oct 2017 - 19:37)

Sinon comme niuxe, utilises des constantes. Les globales sont à proscrire si possible. Les variables de sessions n'ont aucune utilité dans ce cas. Les constantes remplacement agréablement les globales et les variables de sessions (elles ont une portée globale, ce qui ne pose pas de problèmes vu qu'on ne peut pas les modifier).

niuxe a écrit :

nop ! le chemin d'un fichier front est souvent appelé en absolu ! Pourquoi ? l'url rewriting/vhost/etc.

Je parle bien des CSS elle-même, ne me fait pas dire ce que je n'ai pas dit.

Sinon l'impact du chargement d'une css généré avec php est minuscule et peut être mis en cache donc je ne serais pas aussi catégorique.

Et aussi attention aux hard reset avec le sélecteur *, aujourd'hui il y a des resets bien plus modernes comme normalize.css.

Pour définir une font globalement vous pouvez simplement faire :

body {
    font-family:<?php echo $txt__b_font; ?>;
}

Concernant les constantes / $globals la différences principale est qu'on ne peut pas redéfinir les premières donc c'est un peu plus propre que d'utiliser $globals . Après si vous codez en passant toutes les valeurs que ce soit via des variables globales, des constantes ou le tableau $globals c'est d'une manière générale pas une bonne pratique car cela crée de fortes dépendances entre vos scripts et basiquement les scripts que vous faîtes ne seront pas utilisables hors du contexte dans lequel vous l'aurez codé. Encore plus vrai pour la POO.

Voilà, c'est en forgeant qu'on devient forgeron et nulle ne peut faire du bon code du premier coup.
Modifié par bzh (27 Oct 2017 - 22:37)

Merci pour vos conseils.

Si tu pouvais expliciter ton point de vue bzh ? Je ne vois pas quel intérêt apporterais l'intégration par chemin relatif la css ... sachant que je bosse souvent sur une version deep-web que je copie - une fois fonctionnelle, par dessus la version de production, et qu'elles me servent en plus sur plusieurs niveaux d'arborescence dans le même site : c'est bien plus pratique d'avoir des chemins absolues ; et c'est aussi une méthodes présente sur une large majorité de sites - ou alors je ne visite que des sites de niche, qui sait.


Du coup je vais me mettre aux constantes et je pense m'orienter vers LESS dans un premier temps ; on verra si je passe sur SASS ou SCSS plus tard.

Sinon j'ai cette logique en tête quand je souhaite "pimper" un peu mon front : J'utilise les animations / transitions CSS au max, et uniquement lorsque je fait face à une impossibilité / limitation, j'intègre du javascript / jquery en fonction du besoin. Ma raison principale étant le poids du JS en rapport au poid de la CSS : pour le même résultat, le javascript est souvent plus lent et apparaît toujours en décalage du reste - je suppose que le deuxième problème est causé par l'ordre d'interprétation des langages par les navigateurs.
Est-ce que je suis une route cohérente ? Ou bien à côté de la plaque ?

Je parlai de l'intérêt d'avoir des variables php dans une css en général qui est quasi nulle / sans fondement.

Oui, il faut faire le maximum en CSS tout en ne perdant pas de vue que toutes les propriétés ne sont pas reconnues par tous les navigateurs. Donc parfois js peut venir suppléer aux manquements. Et c'est plus lent car on attend souvent la fin de chargement de la page avant de déclencher les scripts. Mais ça ne devrait pas être non plus ultra lent sans quoi il y a un problème.