organisation CSS

organisation CSS - HTML/CSS - Programmation

Marsh Posté le 23-02-2021 à 17:54:58    

Bonjour tout le forum  :hello: ,
j'ai besoin de votre aide.
 
Que pensez-vous de cette organisation de fichier CSS ? D'un point de vue lourdeur du fichier et de la vitesses d'exécution du navigateur ?
 

Code :
  1. /*_________________________________________________________________________display:inline-block*/
  2. .p2,.p3{
  3. display:inline-block;
  4. }
  5. /*_________________________________________________________________________Alignement : display:inline-block*/
  6. .p2{
  7. vertical-align:top;
  8. }
  9. /*_________________________________________________________________________largeur*/
  10. .p0{
  11. width:80%;
  12. }
  13. /*_________________________________________________________________________Alignement texte*/
  14. .pGauche,.p2{
  15. text-align:left;
  16. }
  17. .pCentre,.p1,.p3{
  18. text-align:center;
  19. }
  20. .pDroite{
  21. text-align:right;
  22. }
  24. /*_________________________________________________________________________Couleur de fond*/
  25. .p0,.p1,.p2,.p3,.erreur{
  26. background-color:rgb(255,255,255);
  27. }
  28. /*_________________________________________________________________________Couleur de texte*/
  29. .p0,.p1{
  30. color:rgb(48,75,212);
  31. }
  32. .erreur{
  33. color:rgb(0,0,0);
  34. }
  35. /*_________________________________________________________________________marge extérieure*/
  36. .p1{
  37. margin-left:auto;
  38. }
  39. .p1{
  40. margin-right:auto;
  41. }
  42. .p1,.p3{
  43. margin-top:8px;
  44. }
  45. .p1,.p3{
  46. margin-bottom:8px;
  47. }
  48. /*_________________________________________________________________________marge intérieure*/
  49. .p0,.p1,.erreur{
  50. padding-top:10px;
  51. }
  52. .p0,.p1,.erreur{
  53. padding-bottom:10px;
  54. }
  55. .p0,.p1{
  56. padding-left:4px;
  57. }
  58. .p0,.p1{
  59. padding-right:4px;
  60. }
  61. .p3{
  62. padding:15px;
  63. }
  64. /*_________________________________________________________________________Bordures*/
  65. .p0{
  66. border:3px solid blue;
  67. }
  68. .erreur{
  69. border:3px solid red;
  70. }
  71. /*_________________________________________________________________________Arrondis bordures*/
  72. .p0{
  73. border-radius:20px;
  74. }
  75. /*_________________________________________________________________________Positionnement*/
  76. /*_________________________________________________________________________Autre*/
  77. .p0{
  78. word-wrap:break-word;
  79. }


Message édité par kewan le 23-02-2021 à 19:06:55
Reply

Marsh Posté le 23-02-2021 à 17:54:58   

Reply

Marsh Posté le 23-02-2021 à 18:55:48    

C'est une mauvaise idée, mais vraiment.
Lourd, lent, illisible, recherche pénible.

 

Tu peux ordonner les différentes propriétés, mais sous un unique sélecteur.

 

Et ces nom de classes? Tu peux employer du post processing pour changer les classes, mais pas dans ton fichier de CSS.

Message cité 1 fois
Message édité par David Boring le 23-02-2021 à 18:56:48
Reply

Marsh Posté le 23-02-2021 à 19:15:54    

Merci de ta réponse.
 
Pour l'exécution du navigateur, si j'ai par exemple 30div différentes il est préférable d'avoir 30 fois :

Code :
  1. .div1{
  2. background-color:rgb(255,255,255);
  3. text-align:center;
  4. }
  5. .div2{
  6. background-color:rgb(255,255,255);
  7. text-align:left;
  8. }
  10. etc...


 
je ne comprend pas cette phrase :
 

David Boring a écrit :

Et ces nom de classes? Tu peux employer du post processing pour changer les classes, mais pas dans ton fichier de CSS.


 
Les noms des classes correspondes à différents paragraphes de mes pages que j'ai numérotés.
 
Merci
Kewan

Message cité 1 fois
Message édité par kewan le 23-02-2021 à 19:17:01
Reply

Marsh Posté le 23-02-2021 à 19:40:48    

kewan a écrit :

Merci de ta réponse.
 
Pour l'exécution du navigateur, si j'ai par exemple 30div différentes il est préférable d'avoir 30 fois :

Code :
  1. .div1{
  2. background-color:rgb(255,255,255);
  3. text-align:center;
  4. }
  5. .div2{
  6. background-color:rgb(255,255,255);
  7. text-align:left;
  8. }
  10. etc...




 
Si tu as 30 div différentes, ton design est spécial quand même  :)  
 
Disons que ces div sont des block de news.
Tu peux mettre comme classes  
"news-block"  
"news-block  background-vert"  
"news-block text-align-center background-blue"
 
Dans ta css, tu crées le style global pour "news-block" avec une couleur et un alignement par défaut.
 
Ensuite, avec des classes utilitaires, tu changes la couleur de fond ou l'alignement
 

Code :
  1. .news-block {
  2. background-color: rgb(255,255,255);
  3. padding-top: 10px;
  4. padding-bottom: 10px;
  5. etc…
  6. }
  8. .text-align-right {
  9. text-align: right;
  10. }
  12. background-vert {
  13. background-color: olive;
  14. }


 
 
 

kewan a écrit :


 
Les noms des classes correspondes à différents paragraphes de mes pages que j'ai numérotés.
 
Merci
Kewan


 
Ha OK, ces différents paragraphes n'ont pas plutôt des points commun que tu pourrais utiliser comme nom de classes?
Le plus simple serait de voir ton design pour pouvoir mieux t'aider.

Reply

Marsh Posté le 24-02-2021 à 08:31:20    

+1 avec ce que t'as dit David.
 
Il faut donner des noms sémantiques aux styles et surtout pas en rapport avec le contenu de leur CSS. Donc, si ce sont des blocs de news, effectivement, prendre des noms du genre :
News
News-Content
News-Frame
News-Title
...
 
Tout ce qui peut être en commun, le mettre dans un style et cumuler plusieurs styles pour arriver au style final. Penser également à l'héritage hiérarchique des styles.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 24-02-2021 à 09:10:07    

Merci à tous les deux.
 
j'ai fait des essais,
 
si j'ai bien compris :
 

Code :
  1. <div class= "style1 style2">test</div>

ou

Code :
  1. <div class= "style2 style1">test</div>

n'a pas d'incidence
 
Par contre l'ordre dans le fichier css a une incidence :
 

Code :
  1. .style1{
  2. background-color:rgb(255,0,0);
  3. text-align:center;
  4. }
  5. .style2{
  6. background-color:rgb(0,255,0);
  7. text-align:left;
  8. }


 

Code :
  1. .style2{
  2. background-color:rgb(0,255,0);
  3. text-align:left;
  4. }
  5. .style1{
  6. background-color:rgb(255,0,0);
  7. text-align:center;
  8. }

Reply

Marsh Posté le 24-02-2021 à 09:38:25    

Oui.
Je te propose de lire cet article: https://developer.mozilla.org/fr/do [...] t_heritage
 
Et pourquoi les autres articles aussi: https://developer.mozilla.org/fr/do [...] ing_blocks

Reply

Marsh Posté le 24-02-2021 à 10:50:29    

Merci, je vais étudier ça, j'aurais certainement un tas de questions  :D  

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed