[Résolu] Sondage et avis : BEM or not BEM ?

Bonjour,

Je ne peux pas vraiment répondre au sondage : en effet, quand je code je suis a fond dans la logique OSCSS mais je déteste la syntaxe BEM.

Merci Olivier et quelle syntaxe utilises-tu ?

Pour ma part j'utilise le principe en de BEM en le simplifiant : block-element .modifier

Mais cela reste très verbeux :

<section class="sectionfond clear">
  <div class="w960p center">
    <div class="grid-2">
       <div class="promorevue">
          <img class="promorevue-visuel"src="img/revue.jpg" alt="revue" width="420" height="600">
          <h2 class="promorevue-titre">Nom de la revue</h2>
          <h3 class="promorevue-description">Description de la revue</h3>
          <a href="#" class="bouton primaire mts center">Commander ce numéro</a>
          <a href="#" class="promorevue-lien mts center">Découvrer les autres n° et revues</a>
        </div>
        <div class="promoliens">
          <a href="#" class="promoliens-eobs">
            <div class="promoliens-eobs-ico"><img src="img/ico-ebs-blanc.svg"></div>
	    <div class="promoliens-eobs-txt"><span class="promoliens-eobs-txtpetit">Mon lien</span><br><span class="promoliens-eobs-txtgrand">Promo/span></div>
	  </a>
          <a href="#" class="promoliens-sos mtm">
            <div class="promoliens-sos-ico"><img src="img/ico-sos-blanc.svg"></div>
	    <div class="promoliens-sos-txt"><strong>Mon lien</strong> Promo</span></div>
	  </a>
	</div>
      </div>
    </div>
</section>

Je débute dans les CSS et l'approche OOCSS donc je suis aussi humblement preneur de conseils avisés

Bien à vous.
Modifié par dasys (29 Sep 2015 - 09:23)

Merci Nigel ! Cela me semble très intéressant comme approche.
Aurais-tu un exemple de structure issue de cette méthode maison ?

Merci Manumanu !

J'ai fait une tentative de simplification au niveau du nommage des class html tout en conservant une approche "objet".

Je trouve que c'est un bon compromis au verbeux BEM.

Qu'en pensez-vous ?

Voila ce que ça donne :
http://codepen.io/dasys/pen/qOmbzX

HTML :

<ul class="menu">
  <li class="item">
    <a href="#" class="lien">
      <div class="image"><img src="http://dayoneapp.com/images/features/feature-icon-sync.png"></div>
      <label class="label">Lorem ipsum<br>dolor est</label>
    </a>
  </li>
  <li class="item">
    <a href="#" class="lien">
      <div class="image"><img src="http://dayoneapp.com/images/features/feature-icon-sync.png"></div>
      <label class="label">Lorem ipsum<br>dolor est</label>
    </a>
  </li>
</ul>

CSS :

.menu {
  display:table;
  height:70px;
  background-color:yellow;
  padding:0;
}

.menu>.item {
  display: table-cell; 
  vertical-align: middle; 
  width: 200px;
  background-color: red;
}

.menu>.item>.lien {
  display: table;
  margin: auto;
  background-color:aqua;
}

.menu>.item>.lien>.image, .menu>.item>.lien>.label {
  display:table-cell;
  vertical-align:middle;
}

D'avance merci,
Bien à vous.

Comme le dit nigel, .item est probablement trop générique. Il y a des centaines d'éléments qui sont des "items", et qui par conséquent pourraient demander un css différent pour un même nom de classe. Le but est d'avoir des déclarations les plus légères possibles dans ton CSS : au mieux une classe, au "pire" deux et un sélecteur spécifique.

Donc ".menuItem" (ou autres variantes : .menu-item, .menu__item, etc.) est beaucoup plus approprié que ".menu > .item".

Mais l'un dans l'autre, être verbeux n'est pas un problème en soi, au contraire. C'est le même principe qu'avec les noms de variables ou de fonctions. Entre "uname_id($i)" et "getUserNameById($userID), y a pas photo sur la facilité de lecture. C'est un peu la même chose entre

.content {}

et

.main-page__content {}

et ce peu importe la syntaxe choisie.
Modifié par Manumanu (06 Oct 2015 - 15:49)

Je n'ai pas voulu dire que c'était la même chose ; je me suis peut-être mal exprimé.

L'héritage a du bon oui, mais de façon maîtrisée. D'expérience, c'est rarement le cas dans un projet de plus de 3-4 pages. Le fait est que dans le premier cas, on va effectivement pouvoir bénéficier d'héritage ; mais on va très généralement devoir le contrebalancer avec des déclarations de plus en plus spécifiques, de ce genre :

.maClasse {
	color: blue;
	width: 60em;
	font-size: 1.25rem;
}

.contexte .maClasse {
	color: green; /* ici on veut avoir une autre couleur... facile ! */
}

.contexte .autreContexte .maClasse {
	color: blue; /* mais ici on veut retrouver la couleur d'origine... Obligé de re-surcharger */
	font-size: 1rem;
}

#grosProbleme .maClasse {
	/* et là c'est le drame, on tombe sur un ID... de fait, si on tombe sur un cas où .contexte .maClasse
 se trouve dans #grosProbleme, on est obligés d'écrire
 une surcharge encore plus lourdingue ci-après */
	color: red;
	width: 20em;
}

#grosProbleme .contexte .maClasse {
	/* la surcharge bien lourde, JUSTE pour retrouver du texte bleu... */
	color: blue;
}

Voilà le hic auquel je me confronte dès que je n'ai pas la possibilité d'imposer BEM dans un projet "multi-dev" où je ne suis pas le seul à travailler. En soi, on peut faire tout ce qu'on veut tant qu'on est maître du travail qui est fait. Dès qu'il échappe un tant soit peu à notre contrôle, un approche comme BEM (peu importe la syntaxe choisie) devient nécessaire pour la bonne maintenabilité du projet.

Enfin, c'est mon ressenti.
Modifié par Manumanu (06 Oct 2015 - 18:21)

Bien entendu ; je ne peux pas montrer de cas concret de problème de ce genre, ça prendrait des centaines de lignes pour que le problème devienne bien visible Néanmoins c'est représentatif.