Módulo simple de Sass & Bem para los widgets de alimentación social -- html campo con css campo con modules campo con sass campo con bem camp codereview Relacionados El problema

Simple SASS & BEM module for social feed widgets


0
vote

problema

Español

He estado jugando con Sass and Bem durante los últimos meses. Recientemente comienzo "pensando" en modular en términos de construir mis aplicaciones (para la reutilización y la simplicidad).

Estoy codificando mis módulos en el momento usando el compañero de plantilla. He intentado construir esto lo más simple posible para que si alguna vez vuelvo a mi código, podré averiguarlo lo más rápido posible sin moverme hacia adelante y hacia atrás para intentar identificar qué elemento hace qué elemento.

html

  Person2  

scss

  Person3  

Aquí está mi módulo. Me encantaría saber si alguien tiene algún puntero o consejo sobre cómo podría simplificar / optimizar mi estructura de codificación.

html

  Person4  

scss

  Person5  
Original en ingles

I've been messing around with SASS and BEM for the last few months. I recently starting 'thinking' in modular in terms of building out my applications (for re-usability and simplicity).

I am coding my modules at the minute using the template fellow. I have tried to build this as simple as possible so that if I ever come back to my code, I will be able to figure it out as quickly as possible without moving back and forth to try and identify which element does what.

HTML

<div class="moduleType">     <div class="moduleType__moduleName">         <div class="moduleType__moduleName__block">             <div class="moduleType__moduleName__block__element moduleType__moduleName__block__element--modifier1">                 <p class="moduleType__moduleName__block__element__p moduleType__moduleName__block__element__p--modifier1"></p>             </div>             <div class="moduleType__moduleName__block__element moduleType__moduleName__block__element--modifier2">                 <p class="moduleType__moduleName__block__element__p moduleType__moduleName__block__element__p--modifier2"></p>             </div>         </div>     </div> </div> 

SCSS

.moduleType {   &__moduleName {     &__block {       &__element {         &--modifier1 {         }         &--modifier2 {         }         &__p {           &--modifier1 {           }           &--modifier2 {           }         }       }     }   } } 

Here is my module. I would love to know if anyone has any pointers or advice on how I could further simplify/optimise my coding structure.

HTML

  <!-- Module Start -->      <!-- cardItem Start -->     <div class="container-fluid socialFeed__cardItem">       <!-- cardItem Hero Start -->       <div class="row">         <div class="col-xs-24">           <div class="socialFeed__cardItem__heroImg__cont">             <img src="" class="img">           </div>         </div>       </div>       <!-- cardItem Hero End -->       <!-- cardItem Info Start -->       <div class="row">         <div class="col-xs-24">           <div class="socialFeed__cardItem__info">             <div class="row">               <div class="col-xs-7">                 <div class="socialFeed__cardItem__info__playerImg__cont">                   <img class="img" src="../assets/img/IMG_0894.jpg">                 </div>               </div>               <div class="col-xs-17">                 <div class="socialFeed__cardItem__info__playerText__cont">                   <h5 class="name">Person Name</h5>                   <p class="text">Consectetuer adipiscing elit. Aenean commo doligula eget dolor...</p>                 </div>               </div>             </div>           </div>         </div>       </div>       <!-- cardItem Info End -->     </div>     <!-- cardItem End -->    <!-- Module End --> 

SCSS

//---- widgets__socialFeed START  .socialFeed__cardItem {   width: 205px;   height: auto;    &__heroImg__cont {     border-top: 1px solid #000000;     border-left: 1px solid #000000;     border-right: 1px solid #000000;     border-bottom: 1px solid #000000;     background: gray;     height: 165px;     width: 100%;      .img {}   }    &__info {     border-left: 1px solid #000000;     border-right: 1px solid #000000;     border-bottom: 1px solid #000000;     height: 80px;     width: 100%;      &__playerImg__cont {       height: 80px;       width: 100%;       position: relative;        .img {         height: 55px;         width: 55px;         border-radius: 50px;         top: 11px;         left: 7px;         position: absolute;       }     }      &__playerText__cont {       height: 80px;       width: 100%;       position: relative;        .name {         left: 12px;         position: absolute;         font-size: 14px;         padding-right: 5px;       }        .text {         left: 12px;         top: 20px;         font-size: 11px;         position: absolute;         padding-top: 8px;         padding-right: 5px;         line-height: 13px;       }     }   } } //---- //widgets__socialFeed END 
              
     
     

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Pensando en módulos reutilizables, le gustaría mantener las cosas simples y lo más generales posible con el nombramiento. IMO su versión de BEM es específica. Haré mi mejor esfuerzo para ver mi punto y guiarte.

Si echamos un vistazo a BEM y lo que representa,

bloques, elementos y modificadores

Y aquí hay un resumen bastante bueno de Harry Roberts en este Blogpost

.block representa el nivel más alto de una abstracción o componente.

.BLOCK__Element representa un descendiente de .block que ayuda a formar .Block en su conjunto.

.block - modificador representa un estado diferente o versión de .block.

Por lo tanto, en su caso, podemos eliminar lo siguiente para que sea más bema y para corregir la sintaxis un bit, ambos selectores BEM y CSS (eliminando la camlecasa).

  • moduleType__moduleName__block__element
  • socialFeed__cardItem__heroImg__cont1 (caso real)

Aquí no necesita tener moduleType2 y moduleName3 Como son un poco iguales (¿qué es lo que es el nombre?). Así que vamos con uno,

  • social-card ( b = bloque)

Siguiente Tenemos _block_ PARTE, 9988776655544336 , debe ser el elemento en este caso, así que aquí podemos hacerlo

  • social-card__hero ( e = elemento)

Para el propósito de la demostración podemos decir que nuestra imagen de héroe tiene una superposición con un color de fondo predeterminado que es azul, pero necesitamos un rojo también para la venta de imágenes de héroe

  • social-card__hero--sale8 ( m = modificador)

El resumen de su módulo se podría hacer con estas clases,

  • social-card
  • socialFeed__cardItem__heroImg__cont0
  • socialFeed__cardItem__heroImg__cont1
  • socialFeed__cardItem__heroImg__cont2
  • socialFeed__cardItem__heroImg__cont3
  • socialFeed__cardItem__heroImg__cont4
  • socialFeed__cardItem__heroImg__cont5
  • socialFeed__cardItem__heroImg__cont6
  • socialFeed__cardItem__heroImg__cont7

html con él

  socialFeed__cardItem__heroImg__cont8  

Entonces, cuando se trata de Sass. Por lo general, no quisiera nidar BEM, si se hace, la mayoría de un nivel profundo. Para usar socialFeed__cardItem__heroImg__cont9 para construir su BEM no es óptimo. Seguro que puedes hacer espacio de nombres y ahorrar tiempo, pero viene con los lados de abajo, nuevamente, Harry Roberts resume bien con su Código Ols en CSS Revisited

Un inconveniente menos obvio, sin embargo, es el hecho de que la cadena Foo-Bar ahora ya no existe en mi código fuente. Buscando mi base de código Para Foo-Bar devolverá solo los resultados en HTML (o CSS compilados si hemos Comprobado eso en nuestro proyecto). De repente se hizo mucho más Difícil localizar la fuente de los estilos .foo-bar.

Encontré que este es el caso para mí una vez en un proyecto a mayor escala, fue un desastre. De causa, no es el mayor trato de todos, pero en busca de algo así como moduleType0 recibirá muchos visitas en lugar de moduleType1 . Así que escribir sass como lo haría, CSS regular está bien (sencillo y un nivel), SASS es excelente en otras cosas.

espera que esto tenga sentido? Siéntase libre de hacer preguntas.

 

Thinking in re-usable modules you would like to keep things simple and as general as possible with naming. IMO your version of BEM is to specific. I'll try my best to get my point across and guide you.

If we take a look at BEM and what it stands for,

Blocks, Elements and Modifiers

and here is a pretty good summary from Harry Roberts in this blogpost

.block represents the higher level of an abstraction or component.

.block__element represents a descendent of .block that helps form .block as a whole.

.block--modifier represents a different state or version of .block.

So in your case we can remove the following to make it more BEM like and to correct the syntax a bit, both BEM and css selectors (by removing the camleCase).

  • moduleType__moduleName__block__element
  • socialFeed__cardItem__heroImg__cont (real case)

Here you don't need to have moduleType and moduleName as they are kinda the same (what is type, what is name?). So we go with one,

  • social-card(B = block)

next we have _block_ part, heroImg, should be the element in this case, so here we can make it

  • social-card__hero (E = element)

For the purpose of demo we can say that our hero image has a overlay with a default background color that is blue, but we need a red one as well for sale hero images

  • social-card__hero--sale(M = modifier)

Summary of your module could be done with this classes,

  • social-card
  • social-card__hero
  • social-card__hero-image
  • social-card__info
  • social-card__player
  • social-card__player-image
  • social-card__content
  • social-card__content-name
  • social-card__content-text

html with it

<!-- cardItem Start --> <div class="container-fluid social-card">   <!-- cardItem Hero Start -->   <div class="row">     <div class="col-xs-24">       <div class="social-card__hero">         <img src="" class="social-card__hero-image">       </div>     </div>   </div>   <!-- cardItem Hero End -->   <!-- cardItem Info Start -->   <div class="row">     <div class="col-xs-24">       <div class="social-card__info">         <div class="row">           <div class="col-xs-7">             <div class="social-card__player">               <img class="social-card__player-image" src="../assets/img/IMG_0894.jpg">             </div>           </div>           <div class="col-xs-17">             <div class="social-card__content">               <h5 class="social-card__content-name">Person Name</h5>               <p class="social-card__content-text">Consectetuer adipiscing elit. Aenean commo doligula eget dolor...</p>             </div>           </div>         </div>       </div>     </div>   </div>   <!-- cardItem Info End --> </div> <!-- cardItem End --> 

So when it comes to sass. I would generally not nest BEM, if done, most one level deep. To use &__some-element to build your BEM is not optimal. Sure you can namespace and save yourself time, but it comes with downsides sides, again, Harry Roberts sums up good with his Code smells in CSS revisited

One less obvious downside, however, is the fact that the string foo-bar now no longer exists in my source code. Searching my codebase for foo-bar will return only results in HTML (or compiled CSS if wexe2x80x99ve checked that into our project). It suddenly became a lot more difficult to locate the source of .foo-barxe2x80x99s styles.

I found this to be the case for me once in a larger scale project, it was a mess. Of cause it's not the biggest deal of all but looking for something like __image will get a lot of hits instead of hero-slider__image. So writing sass like you would do regular css is ok (plain and one level), sass is great at other things.

Hopes this make sense? Feel free to ask questions.

 
 
       
       
2
 
vote

He revisado su código y puedo hacer las siguientes observaciones:

Mientras me gusta la metodología BEM, no es una panacea especialmente después de la letra. Debe buscar simplicidad a su código, incluso si eso significa no seguir algunas reglas, sino compilar una vista pragmática de su problema.

En ese caso, no debe agregar clases si no tiene casos o reglas de uso que se aplican. Su HTML se puede simplificar a:

  moduleType2  

y usted se convertirá en:

  moduleType3  

Una regla simple a seguir es: ¡No anidó a los selectores más de tres niveles profundos!

De lo contrario, tendrá que mucha especificidad y sus reglas estarán demasiado acopladas con el DOM. Además, no hay reutilización que tenga nombres de clase tan largos. No me molestaron en escribir, por ejemplo: moduleType4

Desea una vida simple para usted y sus compañeros colegas que va a usar sus componentes. Trate de usar pequeñas clases reutilizables para aplicar efectos y tener una convención simple para los nombres.

 

I've reviewed your code and I can make the following remarks:

While I like the BEM methodology, its not a panacea especially following it to the letter. You must seek simplicity to your code even if that means not following some rules but compiling an pragmatic view of your problem.

In that case you should not add classes if you do not have use cases or rules to apply. Your HTML can be simplified to:

<div class="moduleType">     <div class="moduleType__moduleName">        <p class="moduleType__moduleName_element"></p>     </div> </div> 

and you css will become:

moduleType {   &__moduleName {     &_element {     }   } } 

one simple rule to follow is: Do not nest selectors more than three levels deep!

Otherwise you will have to much specificity and your rules will be too much coupled with the DOM. Plus no reusability having such a long class names. I would't be bothered to type for example: moduleType__moduleName__block__element__p--modifier1

You want a simple life for you and your fellow colleagues you are going to use your components. Try to use small reusable classes to apply effects and have a simple convention for names.

 
 
   
   

Relacionados problema

1  Organización CSS con BEM  ( Css organization with bem ) 
He aprendido recientemente BEM & AMP; Sass, y me gustaría saber si mi sintaxis BEM es correcta. Estoy tratando de crear solo el encabezado de esta página: ht...

1  HTML / CSS simple para fines de aprendizaje  ( Simple html css challange for learning purposes ) 
Como parte de mi estudio, decidí hacerlo esta tarea del sitio frontendmentor . Es un código HTML corto, pero me gustaría aprender buenas prácticas desde el p...

0  Módulo simple de Sass & Bem para los widgets de alimentación social  ( Simple sass bem module for social feed widgets ) 
He estado jugando con Sass and Bem durante los últimos meses. Recientemente comienzo "pensando" en modular en términos de construir mis aplicaciones (para la ...

7  Estructura de correo electrónico BEM  ( Bem email structure ) 
He comenzado a usar la sintaxis BEM para mi HTML y CSS. Tengo la idea de la publicación del blog de Harry Roberts "MindBemding â € "Obtención de la sintaxis ...

1  FlexBox & Bem 'Table'  ( Flexbox bem table ) 
Uso de SCSS y reaccionar, he hecho una mesa pequeña (no una tabla HTML), que responde en función de las células de ancho variable. Es decir, cada celda cuyo a...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos