Les CS peuvent-ils incarner la logique conditionnelle?

Le royaume de CSS, ou les feuilles de style en cascade, ne supporte pas nativement si / else les conditions comme dans les langues programmatives traditionnelles. Cependant, cette limitation peut être contournée à travers diverses approches:

1. Classes CSS:

En tirant parti des classes HTML, vous pouvez créer différentes règles de style pour différents scénarios. Par exemple, le code suivant attribue des positions d'arrière-plan distinctes basées sur la classe:

Text
Text

p.normal {
  background-position: 150px 8px;
}
p.active {
  background-position: 4px 8px;
}

2. CSS Preprocessers (par exemple, sass):

Les préprocesseurs CSS comme SASS fournissent des instructions conditionnelles qui permettent des conditions plus complexes:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

3. CSS Properties personnalisées (variables):

Les propriétés personnalisées en CSS se comportent de la même manière que les variables et sont évaluées à l'exécution:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

4. Prétraitement côté serveur:

en utilisant un langage côté serveur comme php, vous pouvez pré-tracer des fichiers CSS basés sur des valeurs dynamiques:

p {
  background-position: px 8px;
}

5. Techniques CSS pour la logique d'interface utilisateur:

Ahmad Shadeed présente de nouvelles techniques CSS pour résoudre la logique conditionnelle commune basée sur l'interface utilisateur sans utiliser si / else dans son article:
[CSSS-Il / else] (https://www.sitepoint.com/css-ifelse/)