Passer un paramètre à une classe CSS

**laurentSc** · 14/08/2015, 21h49

Bonsoir,

une petite recherche n'ayant rien donné, voici ma question :
j'ai n classes du type :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
 .table_cellspacing2 {
 border-spacing: 2px;
 border-collapse: collapse;
 }
 
 .table_cellspacing3 {
 border-spacing: 3px;
 border-collapse: collapse;
 }
 
etc

et au lieu de les multiplier, je voudrais faire un truc du style :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 .table_cellspacing(param) {
 border-spacing: param px;
 border-collapse: collapse;
 }

que je pourrais appeler par exemple comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<table class="table_cellspacing(3)">...</table>

Est-ce possible ?

**vttman** · 15/08/2015, 09h26

Hello LaurentSc,
je pense qu'il faudra se tourner vers des préprocesseurs CSS
pour faire ça
=>
http://blog.soat.fr/2014/07/preproce...-less-vs-sass/

**laurentSc** · 15/08/2015, 10h53

Merci pour ta réponse ; cela dit, même la version soi-disant pour les débutants (less) me semble pas simple...Donc tant pis...

**JefReb** · 15/08/2015, 11h44

Et pourquoi pas avec php?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
function tablecell($num) {
echo '<table class="table_cellspacing'.$num'">'."\n";
?>
<!doctype html>
<html>
<head>
...
...
<?php tablecell(3); ?>
...
</table>

**laurentSc** · 16/08/2015, 10h27

Quand j'ai vu ta réponse (hier), elle m'a plu mais l'ai mise de côté pour plus tard et là où je voulais me pencher dessus, je vois un inconvénient : certes, l'appel est paramétré mais ça n'évite pas la création de multiples classes CSS...

Invité · 16/08/2015, 15h08

Bonjour Laurent,
sans vouloir te vexer...

Tu as déjà du mal à comprendre les notions de BASE en CSS, PDO, PHP.......

POURQUOI t'acharnes-tu sans arrêt à vouloir TE/NOUS compliquer la vie ???????????

Et, par la même occasion, à MOBILISER des BÉNÉVOLES sur DVP pour REPONDRE à tes questions ?

Tout ça pour "économiser" 4 lignes de code CSS !!!!!!!!!!!

**laurentSc** · 16/08/2015, 16h16

Mon objectif n'était pas de compliquer mais de simplifier...

En fait, des classes CSS pour fixer la propriété width, pour ce site, j'en ai pas 4 mais 18...et y a d'autres propriétés du même genre.

**Bisûnûrs** · 18/08/2015, 11h23

Tu peux aussi facilement limiter le nombre de lignes CSS en réorganisant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<table class="table spacing3">

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<table class="table spacing4">

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.table    { border-collapse:collapse; /* et toutes les autres propriétés similaires aux différentes classes */ }
.spacing3 { border-spacing:3px; }
.spacing4 { border-spacing:4px; }

**laurentSc** · 19/08/2015, 00h02

OK, merci Bisunurs ; dans le cas des classes table_cellspacingx, ça convient mais dans le cas des 18 classes pour width, non :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.widthXXX {
width: XXX px;
}

**Bisûnûrs** · 19/08/2015, 09h12

Oui, il faut faire 18 classes différentes, mais chacune de ces classes ne comprendront qu'une seule ligne, vu que tu auras bien pensé à agréger les données similaires dans une autre classe. Ton fichier CSS en sera que plus léger et plus lisible.

Mais, soit dit en passant, si tu as 18 classes pour les largeurs, c'est que tu as un grave problème de conception.

Invité · 19/08/2015, 10h57

Laurent,
il faut DORMIR LA NUIT, et OUVRIR LES YEUX LE MATIN !!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.widthXXX {
width: XXX px;
}

Comme d'habitude :

1/ Tu n'es pas capable de mettre le CODE REEL (celui qui ne marche pas) !!

2/ Tu n'es même pas capable, en écrivant ton code moisi, de VOIR que tu as mis un ESPACE entre XXX et px !!!
Évidemment, ça ne marche pas !!!

3/ Je

Bisunurs : ce que tu cherches à faire est une aberration, voire une stupidité.
Mettre dans ton code HTML des class="widthxx" équivaut à écrire du CSS online style="width: xxpx;",
puisque, si tu dois modifier la largeur, tu devras le faire DANS le code HTML (en remplaçant par class="widthyy")!!
C'est là toute l'aberration !

Une feuille de style CSS externe permet de modifier le style EN DEHORS du code HTML.

C'est clair, ou pas ??

4/ Le seul usage possible/utile est avec les media queries :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="width50">
...
</div>
<div class="width50">
...
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/* desktop */
@media screen and (min-width:1025px) {
   .width50 { width:33.33%; float:left; clear:none; } /* 3 blocs par ligne */
}
/* tablet */
@media screen and (min-width:641px) and (max-width:1024px) {
   .width50 { width:50%; float:left; clear:none; } /* 2 blocs par ligne */
}
/* phone */
@media screen and (max-width:640px) {
   .width50 { width:100%; float:none; clear:both; } /* 1 bloc par ligne */
}

**laurentSc** · 19/08/2015, 18h37

OK, si j'ai mis un espace dans mon post, c'est pour augmenter la lisibilité, sans faire attention que du coup, c'était syntaxiquement incorrect, par contre, dans le vrai fichier CSS, je ne les ai pas mis.

Ce que tu me fais réaliser, c'est l'aberration de la chose.
En fait, comme je l'ai déjà dit, je suis en train de modifier un vieux code et notamment de corriger tout ce qui est obsolète. La raison des 18 classes et de l'aberration (des classes dont le nom devrait changer si on changeait la valeur), vient du fait que dans ce vieux code, la largeur était modifiée dans le code html (exemple : <table width="100%">) et donc pour supprimer ça, à chaque fois, j'ai créé une classe CSS (pour l'exemple c'était .width100pour100). C'est clair que cette conception est nulle. Je vais donc tout reprendre et créé seulement 5 classes (par exemple) : width_minuscule, width_petit, width_moyen, width_grand et width_tres_grand et par exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.width_minuscule {
width:5%;
}

ça serait mieux ?

Passer un paramètre à une classe CSS

CSS

Discussions similaires

Partager

Partager