Dúvidas método BEM para CSS #721

pietrobelluno · 2017-09-13T00:13:01Z

pietrobelluno
Sep 13, 2017

Olá , boa noite ! Estava procurando uns métodos pra padronizar e arquitetar o meu css , e me deparei com o método bem , só não consegui entender algumas coisas , espero que vocês possam me ajudar !

Pelo que eu entendi uma div pai se chamaria digamos "content" e uma filha "content__filha" ai se eu tiver uma dentro vai ser "content__filha__filha?"
Eu li que quando tu tem um arquivo modificado tu usa "content__filha--modificado" pareceu mt bom mas na hora de botar no css tenho a seguinte duvida , digamos q tenho uma div cm width 20% ai eu quero q 2 sejam menores eu iria adicionar uma class "small" e chamar no css .content__filha.small{width:10%;}(so modifico o tamanho) por exemplo e colocaria ela embaixo do selector de .content__filha pra sobrescrever , mass se eu usar .content__filha--small eu terei q duplicar todo o codigo da .content__filha e mudar a width , eu acho mais eficiente adicionar a class separada q nem eu fiz , mas posso ter entendido errado.
Em que casos eu devo usar esse metodo? Por exemplo devo utilizar em todas divs filhas ? ou so em algumas especificas?

Se alguém manjar de BEM e puder me ajudar com isso ficarei muito agradecido , se tiverem tutoriais , artigos qualquer coisa vai ser de grande ajuda também !!

cristofersousa · 2017-09-13T00:52:38Z

cristofersousa
Sep 13, 2017

Olar,

BEM - bloco, elemento e modificador.

.box 
  .box__warning
  .box__sucess
  .box__sucess--isActive
  .box__sucess--isInactive

Espero que tenha ajudado.

0 replies

ranosi · 2017-09-13T01:04:32Z

ranosi
Sep 13, 2017

Senão me engano também, uma prática boa também é você limitar até três camadas, pra não gerar classes enormes. É bom pensar bem nas classes que vai usar, tanto pra ficar fácil de ler e se organizar. Usando Sass ou Stylus tu consegue organizar melhor a casa acho. Pra algumas coisas, como tu citou de a segunda div vai ter uma diferença, eu uso( não sei se é recomentado) umas pseudo-class que fazem bem esse trabalho. Em 13 de setembro de 2017 00:56, Kevin Oliveira <[email protected]> escreveu:

…

Deixa eu ver se consigo te ajudar, não sou o expert em BEM (nem manjo muito bem de BEM... dsclp pelo trocadilho). Vamos por partes: Pelo que eu entendi uma div pai se chamaria digamos "content" e uma filha "content__filha" ai se eu tiver uma dentro vai ser "content__filha__filha?" Na verdade, o mais recomendado seria definir escopos para suas classes senão elas ficarão enormes. Imagina do define uma classe para <main class="main"> e faz algo do tipo: .main__post__post-content__post-title. Definindo escopos ficaria algo do tipo: .post-header, .post-header__title, .post-header__date etc. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/frontendbr/forum/issues/721#issuecomment-329026175>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AV1hh8g-1u7s4FiWAHVUiL4OqdvV99Ivks5shyhLgaJpZM4PVaoz> .

-- Grande abraço, [image: --] Rafael Nogueira [image: https://]about.me/rafaelnogueira <https://about.me/rafaelnogueira?promo=email_sig&utm_source=email_sig&utm_medium=email_sig&utm_campaign=external_links>

0 replies

kvnol · 2017-09-13T01:05:09Z

kvnol
Sep 13, 2017

Deixa eu ver se consigo te ajudar, não sou o expert em BEM (nem manjo muito bem de BEM... dsclp pelo trocadilho). Vamos por partes:

Pelo que eu entendi uma div pai se chamaria digamos "content" e uma filha "content__filha" ai se eu tiver uma dentro vai ser "content__filha__filha?"

Na verdade, o mais recomendado seria definir escopos para suas classes senão elas ficarão enormes. Imagina do define uma classe para <main class="main"> e faz algo do tipo: .main__post__post-content__post-title.

Definindo escopos ficaria algo do tipo: .post-header, .post-header__title, .post-header__date etc.

Eu li que quando tu tem um arquivo modificado tu usa "content__filha--modificado" pareceu mt bom mas na hora de botar no css tenho a seguinte duvida , digamos q tenho uma div cm width 20% ai eu quero q 2 sejam menores eu iria adicionar uma class "small" e chamar no css .content__filha.small{width:10%;}(so modifico o tamanho) por exemplo e colocaria ela embaixo do selector de .content__filha pra sobrescrever , mass se eu usar .content__filha--small eu terei q duplicar todo o codigo da .content__filha e mudar a width , eu acho mais eficiente adicionar a class separada q nem eu fiz , mas posso ter entendido errado.

Então, no caso desse content__filha--modificado você NÃO usaria o width diretamente no content__filha e sim no content__filha--small, ...--medium e ...--large, saca? Você vai ~~aproveitar~~ (a famosa cascata do CSS) para os estilos que se repetem para todos. Por exemplo, num botão:

<a href="#" class="post-content__button">Veja mais sobre BEM</a>

/* estilo padrão do botão */
.post-content__button {
  display: block;
  padding: .8rem 1.2rem;
  color: #fff;
  background-color: tomato;
}

/* modificadores */
.post-content__button--small {
  font-size: .8rem;
}

.post-content__button--medium {
  font-size: 1rem;
}

.post-content__button--large {
  font-size: 1.2rem;
}

Utilizando a classe principal e a modificadora no seu elemento:

<a href="#" class="post-content__button post-content__button--medium">Veja mais sobre BEM</a>

Em que casos eu devo usar esse metodo? Por exemplo devo utilizar em todas divs filhas ? ou so em algumas especificas?

Como disse, a melhor ideia é definir escopos. Isso pode variar em cada projeto.

0 replies

kvnol · 2017-09-13T01:09:06Z

kvnol
Sep 13, 2017

Exatamente como o @ranosi disse:

Senão me engano também, uma prática boa também é você limitar até três
camadas, pra não gerar classes enormes...

E usar isso com SASS (ou qualquer outro pré-processador, fica lindo) - mas cuidado com os aninhamentos.

O mesmo exemplo com SASS:

<a href="#" class="post-content__button">Veja mais sobre BEM</a>

/* estilo padrão do botão */
.post-content__button 
  display: block
  padding: .8rem 1.2rem
  color: #fff
  background-color: tomato

  &--small
    font-size: .8rem

  &--medium
    font-size: 1rem

  &--large
    font-size: 1.2rem

❤️

0 replies

pietrobelluno · 2017-09-13T02:25:09Z

pietrobelluno
Sep 13, 2017
Author

Então, no caso desse content__filha--modificado você NÃO usaria o width diretamente no content__filha e sim no content__filha--small, ...--medium e ...--large, saca? Você vai aproveitar (a famosa cascata do CSS) para os estilos que se repetem para todos. Por exemplo, num botão:

Exato mas olha só , n tem como eu aproveitar o efeito cascata do CSS pois

/* estilo padrão do botão */
.post-content__button {  /* Ta se referindo a class .post-content__button */
  display: block;
  padding: .8rem 1.2rem;
  color: #fff;
  background-color: tomato;
}

/* modificadores */
 /* esse selector nao vai pegar as propriedades do .post-content__button ai , no caso 
eu teria q duplicar pra chegar no resultado que quero */
.post-content__button--small {
  font-size: .8rem;
/* Duplicado*/
 padding: .8rem 1.2rem;
  color: #fff;
  background-color: tomato;
}

Agora do jeito que eu faço seria

.post-content_button.small{
   font-size:.8rem;
}

Ai ele ia modificar somente o font-size mas meu elemento ia ter o css do .post-content__button--small , so se esse modificador tu meio q duplica na classe , por exemplo:

<a href="#" class="post-content__button post-content__button--small">Veja mais sobre BEM</a>
ai faz sentido

0 replies

kvnol · 2017-09-13T02:48:01Z

kvnol
Sep 13, 2017

Sim, @PietroBP! Me desculpa, escrevi o HTML errado. Você vai duplicar ele no HTML mesmo, dessa forma que tu fez:

<a href="#" class="post-content__button post-content__button--small">Veja mais sobre BEM</a>

Perdão, vou corrigir os comentários anteriores.

0 replies

pietrobelluno · 2017-09-13T02:51:57Z

pietrobelluno
Sep 13, 2017
Author

@kvnol aaaaaa agora fez sentidoo , muito obrigado !! vou tentar utilizar com sass que nem voce falou , acho q vai dar uma boa ajuda hahahah

0 replies

theandersonn · 2017-09-13T13:08:19Z

theandersonn
Sep 13, 2017

Pô um lance válido é pesquisar as outras metodologias e juntar o melhor de cada metodologia.

Por exemplo, estive pesquisando e na época gostei muito do BEM, mas na pratica a sujeira visual é doer.

Então descobri o RCSS e me identifiquei mais. Então no geral eu aplico um pouco de cada.

Alguns links:
Falando em organização CSS...
http://www.felipefialho.com/blog/2014/falando-em-organizacao-css

Sass: Directory Structures That Help You Maintain Your Code
http://vanseodesign.com/css/sass-directory-structures/

OOCSS, SMACSS, BEM, DRY CSS: afinal, como escrever CSS?
https://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/

Falando sobre RSCSS
https://willianjusten.com.br/falando-sobre-rscss/

0 replies

kvnol · 2017-09-13T13:25:40Z

kvnol
Sep 13, 2017

@theandersonn, eu também acabo aplicando um pouco de cada. Com o SASS, reduzo ainda mais, pois, conversando com a @talitapagani, uma ideia boa é reduzir alguns estilos para mixins.

Por exemplo no botão, ao invés de termos duas classes no HTML, eu utilizaria apenas uma e faria os estilos com placeholders:

<a href="#" class="post-content__button">Veja mais sobre BEM</a>

%button
  display: block
  padding: .8rem 1.2rem
  color: #fff
  background-color: tomato

%button--small
  font-size: .8rem

%button--medium
  font-size: 1rem

%button--large
  font-size: 1.2rem

.post-content__button
  @extend %button, %button--large

Atualizando: melhorando ainda mais o código, extendendo apenas um placeholder:

%button
  display: block
  padding: .8rem 1.2rem
  color: #fff
  background-color: tomato

%button--small
  @extend %button
  font-size: .8rem

%button--medium
  @extend %button
  font-size: 1rem

%button--large
  @extend %button
  font-size: 1.2rem

.post-content__button
  @extend %button--large

0 replies

pietrobelluno · 2017-09-13T14:26:24Z

pietrobelluno
Sep 13, 2017
Author

cara lendo o RSCSS eu vi que eu fazia meu html e seletores bem parecidos com ele, antes de saber da existencia dele hahahahah , realmente o BEM suja mt o html parece que foi algo gerado. Vou tentar me aprofundar no RSCSS , achei mais minha cara

0 replies

ranosi · 2017-09-13T14:43:43Z

ranosi
Sep 13, 2017

O RSCSS e o BEM são coisas diferentes e complementares. Nesse artigo do William fala um pouco disso. Ontem esbarrei nesse artigo aqui, acho que vai ser de ajuda também https://m.alphasights.com/bem-i-finally-understand-b0c74815d5b0 Em 13 de setembro de 2017 11:27, pietrobp <[email protected]> escreveu:

…

cara lendo o RSCSS eu vi que eu fazia meu html e seletores bem parecidos com ele, antes de saber da existencia dele hahahahah , realmente o BEM suja mt o html parece que foi algo gerado. Vou tentar me aprofundar no RSCSS , achei mais minha cara — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/frontendbr/forum/issues/721#issuecomment-329184843>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AV1hh-P9O_MYf7tKDW7okbCXIRkNkzeCks5sh-Y-gaJpZM4PVaoz> .

-- Grande abraço, [image: --] Rafael Nogueira [image: https://]about.me/rafaelnogueira <https://about.me/rafaelnogueira?promo=email_sig&utm_source=email_sig&utm_medium=email_sig&utm_campaign=external_links>

0 replies

theandersonn · 2017-09-13T15:19:30Z

theandersonn
Sep 13, 2017

@kvnol Com placeholder é tranquilo? Já passou por algum efeito colateral?

Tem feito algo, como isso:

.button {
    display: block;
    padding: .8rem 1.2rem;
    color: #fff;
    background-color: tomato;

    &.-small {font-size: .8rem;}
    &.-medium {font-size: 1rem;}
    &.-large {font-size: 1.2rem;}
}

<a href="#" class="button -small">Veja mais sobre BEM</a>

0 replies

kvnol · 2017-09-13T16:59:52Z

kvnol
Sep 13, 2017

@theandersonn, na verdade eu me confundi. Nestes exemplos, estou utilizando placeholder. E é tranquilo utilizar placeholder, tem uma galera que não gosta, mas eu gosto justamente por ele gerar um CSS mais comprimido em vez de repetir propriedades.

0 replies

felipefialho · 2017-09-13T18:20:57Z

felipefialho
Sep 13, 2017
Maintainer

Uma coisa que faço nos modificadores, até para evitar nomes muito grandes (tento manter a hierarquia em até três níveis, mesma regra de componentes aninhados), é aproveitar a cascata de CSS:

.nav
  &__item
     &__link
        &.--active

Assim você consegue manter seu CSS local (active só funciona nesse escopo) e ao mesmo tempo, se aproveitar da cascata para evitar nomes muito grandes depois, como .nav__item__link--active.

É só tomar cuidado para não vazar os modificadores.

Sobre RSCSS, ITCSS, (carario, quanta sigla), etc, você vai encontrar muitos problemas por causa de hierarquia do HTML, se você fizer por exemplo:

.header > .title

E no HTML precisar usar

<header class="header">
  <div class="header__main">
    <h1 class="title">Foo</h1>
  </div>
</header>

Já vai cagar a porra toda e vai precisar alterar o CSS para adaptar a nova estrutura. Tentei ir por esse caminho uns anos atrás porque também não curtia a "sujeira" gerada pelo BEM, e no fim, só me deu dor de cabeça.

Conselho?

Desencana de sujar o código, o usuário (e seu boss) não quer ver código bonito, quer sistemas funcionais e rápidos de escalarem.

As classes geradas no final não são importantes, desde que o ambiente de desenvolvimento tenha metodologias sólidas que explicam o porque daquilo.

0 replies

ranosi · 2017-09-13T18:29:30Z

ranosi
Sep 13, 2017

O que comecei a brincar foi com ITCSS+BEM. Achei simples, fica organizado e tu adapta pra sua necessidade. https://willianjusten.com.br/organizando-seu-css-com-itcss/
Tem o Atomic também mas só li sobre, não botei em prática.

0 replies

Dúvidas método BEM para CSS #721

Uh oh!

Uh oh!

Replies: 15 comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pietrobelluno Sep 13, 2017 Author

Uh oh!

Uh oh!

Uh oh!

pietrobelluno Sep 13, 2017 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pietrobelluno Sep 13, 2017 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

felipefialho Sep 13, 2017 Maintainer

Uh oh!

pietrobelluno
Sep 13, 2017
Author

pietrobelluno
Sep 13, 2017
Author

pietrobelluno
Sep 13, 2017
Author

felipefialho
Sep 13, 2017
Maintainer