Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1082 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  organisation CSS

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

organisation CSS

n°2376687
kewan
Posté le 23-02-2021 à 17:54:58  profilanswer
 

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
mood
Publicité
Posté le 23-02-2021 à 17:54:58  profilanswer
 

n°2376692
David Bori​ng
Posté le 23-02-2021 à 18:55:48  profilanswer
 

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
n°2376695
kewan
Posté le 23-02-2021 à 19:15:54  profilanswer
 

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
n°2376696
David Bori​ng
Posté le 23-02-2021 à 19:40:48  profilanswer
 

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.

n°2376700
rufo
Pas me confondre avec Lycos!
Posté le 24-02-2021 à 08:31:20  profilanswer
 

+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
n°2376701
kewan
Posté le 24-02-2021 à 09:10:07  profilanswer
 

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

n°2376702
David Bori​ng
Posté le 24-02-2021 à 09:38:25  profilanswer
 

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

n°2376711
kewan
Posté le 24-02-2021 à 10:50:29  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  organisation CSS

 

Sujets relatifs
YouTube - problème CSS[Résolu] Performance Elementor et One Page, trop de CSS et Javascript
Blend Mode CSSCSS: récupérer la position courante d'une animation pour l'inverser ?
interface utilisateur modifiant contenu HTML et CSSPetit site d’organisation de sorties
CSS - Retour en haut de colonne[HTML/CSS] problème d'organisation - Résolu.
organisation de block "div" avec les CSS: problemeOrganisation CSS
Plus de sujets relatifs à : organisation CSS

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.051 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR