Comment simplifier ma feuille de style CSS ?

Question

J'essaie de simplifier mon sélecteur css dans la feuille CSS.

J'ai quelque chose comme

.table_test .div, .table_name .div, .table_company .div{
    color:black;
}

.table_test .div table input, .table_name .div table input{
    color:red;
}

Mon html est quelque chose comme

<div class='table_test'>
  <div class='div'>......
  <table>
   <tr>
    <td><input>...</td> 
   </tr>
  </table>
</div>

<div class='table_name'>
  <div class='div'>......
  <table>
   <tr>
    <td><input>...</td> 
   </tr>
  </table>
</div>

J'ai l'impression qu'il y a beaucoup de sélecteurs regroupés et je me demandais s'il y avait un moyen de simplifier les choses. Merci pour votre aide !

Answer 1

Quelques trucs :

N'utilisez pas de noms de classe génériques comme div . Il y a déjà un élément appelé div . Si vous souhaitez le cibler en fonction de l'imbrication, faites-le à l'aide de CSS.

.table_name > div {} /* or .table_name div */

Et pas...

.table_name .div {}

Utilisez des sélecteurs spécifiques. Y a-t-il une raison pour laquelle vous devez passer par table_name .div table input ? Pourquoi ne pas cibler spécifiquement l'entrée en lui donnant une classe ?

<input class="my_input">

Et puis :

.my_input {
  color: red;
}

Enfin, c'est à vous de choisir le style à utiliser, mais la plupart des gens ont tendance à utiliser des guillemets doubles autour des attributs html. Par exemple :

<div class="table_name"> et non <div class='table_name'>

Answer 2

Vous pouvez créer un nom de classe que les tables de même style partageront.

CSS

.similar-table .div{
    color:black;
}

.similar-table input{
    color:red;
}

HTML

<div class='table_test similar-table'>
  <div class='div'>......
  <table>
   <tr>
    <td><input>...</td> 
   </tr>
  </table>
</div>

<div class='table_name similar-table'>
  <div class='div'>......
  <table>
   <tr>
    <td><input>...</td> 
   </tr>
  </table>
</div>

Answer 3

CSS :

.red{
  color:red;
}
.black{
  color:black;
} 

HTML:

<div class='table_test'>
 <div class='div'>......
  <table>
   <tr>
    <td><input class="black">...</td> 
   </tr>
 </table>
</div>

<div class='table_name'>
 <div class='div'>......
  <table>
   <tr>
    <td><input class="red">...</td> 
   </tr>
  </table>
</div>

Le meilleur ? Cette CSS fonctionnera partout où vous le souhaitez .