Metodologias CSS

[willianjusten]

Hoje fiz um post sobre uma metodologia que tem me agradado bastante, que é o RSCSS.

• Meu post sobre RSCSS
• Documentação do RSCSS

Já vi várias metodologias como BEM, SMACSS, SUIT...

Gostaria que as pessoas falassem um pouco de quais metodologias usam e como as usam. Quais os motivos pela escolha e quais ganhos viu com isso.

---

Eu optei por RSCSS por ser bem fácil de aprender, ser bem limpa tanto no html como no css. E por trabalhar com a ideia de componentização, que é o futuro de tudo.

[bernardocs]

Eu vi seu post, rapaz!

Muito bom! Way to go!

---

Já vi e usei OOCSS, BEM, SMACSS... e irei testar RSCSS assim que eu puder.

---

Eu, geralmente, tento agregar o melhor de cada um...
De uma forma geral, meu código é bem SMACSS...

Mas curto a idéia do BEM de reduzir o número de seletores pra aumentar a peformance, embora eu ache que o tradeoff de ter um HTML mais sujo (e mais pesado) não vale. :)

[afonsopacifer]

Para sistemas "maiores" eu gosto muito do Atomic Design.

O lado bom:

• É focado na organização dos elementos, e deixa o padrão de nomenclatura em aberto, o que possibilita integrar facilmente com outras metodologias focados em nomenclatura.
• É um tipo de Style Guide first, ou seja, você cria o guia de estilos com os elementos reais e depois usa suas combinações para montar suas páginas, é como se você criase seu próprio Bootstrap + Style Guide
• É lindo <3

O lado ruim:

• É muito pouco difundido, existem poucos artigos e quase nada existe pronto para vc estudar.
• O livro, que será a grande referência da metodologia, ainda está sendo escrito.
• É bem difícil começar a pensar de forma Atômica.

As principais referências são:

• Post by Brad Frost.
• Presentation by Brad Frost.
• Book by Brad Frost.

Ferramentas:

• pattern lab By Brad Frost
• microscope By Afonso Pacifer

Eu tive dificuldades em usar o Pattern lab, por ser em php e tal, até existe uma versão em nodejs, mas não me agradou, ai criei o microscope usando a Stack que eu precisava na hora, mas acho que vou fazer algo mais genérico em um futuro próximo ;)

Alguém já chegou a brincar com Atomic Design?

[ghost]

@afonsopacifer cara, lindo seu projeto, sobre brincar, eu já tentei.. comecei pensando como atomic terminei com um frankenstein, nada de atomic, eu vou começar a fazer meu site pessoal tentando aplicar o atomic com o RSCSS que o @willianjusten apresentou hehe.. vai que sai uma terceira teoria.. hahah.

E obrigado mesmo pelo microscope ;)

[afonsopacifer]

@Meche Vlw ^^
Esse lance de Atomic > frankenstein já rolou comigo vaaaarias vezes rsrrs, mas no final vale muito a pena :)

[vitorbritto]

Aprendi que quanto mais leio sobre as metologias existentes para CSS, mais fico confuso e demoro a aceitar a lógica proposta. Então resolvi aplicar uma metodologia própria com base em SMACSS e OOCSS apenas.

Nem todo projeto tem a mesma estrutura, por conta disso sempre teremos a necessidade de manter uma semântica para não poluir o markup do HTML e não tornar o CSS engessado de um modo diferente. É um desafio, mas é preciso manter o projeto manutenível, escalável e modularizado. Parece fácil, mas não é. Nem para quem tem 15 anos de CSS.

Até hoje, mesmo com uma obsessão por organização nos projetos (seja no código, estrutura e afins), olho para o meu CSS e não gosto do que vejo. 👻

[vitorbritto]

Ví agora o RSCSS @willianjusten. Posso dizer que a metodlogia que uso tem boa parte dele. Só o estilo BEM (-- ou - como prefixos) que não utilizo. Eu prefiro .is-highlight, .push-top, etc. E crio também classes globais, que chamo de helpers.

Exemplo:

.no-opacity { @include opacity(1); }

.no-filter { filter: none; } // for gte IE9 only
.is-hidden { display: none; }
.is-visible { display: block; }

.clear { @include clearfix; }
.has-space { margin: 20px auto !important; }
.has-no-margin { margin: 0 !important; }

[rickbenetti]

Já fazia muito tempo que eu não criava algo meu, hoje retornando ao Front e ao Design num projeto quase produção (já que o designer deu o cano), estou aproveitando pra repensar em toda a estrutura, há uns anos fiz o mesmo com o site da viajanet, acabei que na época consegui criar uma estrutura única que hoje é reutilizada.

Hoje além de pensar na reutilização quero pensar mais na atomização, o texto do @willianjusten é muito legal por apresentar algo que todos em algum momento já utilizaram, mas acaba sempre saindo da curva.

O RSCSS acredito ser uma base ótima para parceria com o Atomic Design e muito melhor do que a leitura que o BEM oferece, o OOCSS vi muito pouco para opinar.

Como sempre fui contra o Bootstrap e o Foundation principalmente, a abordagem destas metodologias me atraem mais por justamente permitir que você decida a estrutura e crie algo seu.

[brunoravanhani]

Eu vi seu post @willianjusten e como sou fascinado por metodologias já vou implementar no meu trabalho pra ver como fica. Hoje a metodologia que uso é o que sobrou de uma tentativa de usar BEM, que terminou quando o HTML ficava ilegível... Eu acho legal aprender essas metodologias - que já deram certo pra alguém pelo menos -, mas como o @vitorbritto disse, cada projeto é diferente, e cada desenvolvedor é diferente também, por isso acho que essas metodologias são só uma base, um começo para uma que se adeque à sua realidade e a da sua empresa.

[bernardodiasc]

Li hoje um artigo sobre ITCSS bem interessante, não conhecia isso https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

[willianjusten]

Opa @bernardodiasc, fiz um post sobre isso:

• Organizando seu css com ITCSS

[bernardodiasc]

Muito bom @willianjusten, essa técnica me parece bastante eficaz! Interessante como da pra somar ou adaptar varios métodos diferentes.

Tem uma outra metodologia para organizar propriedades bem interessante chamada Concentric http://rhodesmill.org/brandon/2011/concentric-css/, o maior beneficio que vi é que depois de um tempo fica muito claro o que é "perfumaria" e o que é layout, acho uma habilidade útil pra poder executar em cima do ITCSS, digo, jogar as propriedades nos lugares certos por exemplo pra não haver "sobreescrevencia". Vale comentar que uma ferramenta de linter que entenda essa organização no meio ajuda pacas, na ocasião estava trabalhando com sass então usei o scss-lint, há outras opções de ordenamento que tb são legais https://github.com/brigade/scss-lint/tree/master/data/property-sort-orders, mas como comentei, a teoria do Concentric é legal, mesmo que acabe optando por ordem alfabética :)

[willianjusten]

Boas adições @bernardodiasc ! =)

[fernandofleury]

Acho que metodologia serve pra dar um norte. Se voce se atentar estritamente em seguir a regra o que ela prega, voce vai acabar moldando seu CSS pra algo que voce nao concorda 100%.

Acho importante voce ler o que elas tem pra oferecer, absorver o que voce concordar, e seguir com algo seu no fim. Sao guidelines no final das contas

[brunoravanhani]

A Trivago está usando essa organização também http://tech.trivago.com/2016/02/02/large-scale-css-refactoring-at-trivago/

[suissa]

@afonsopacifer Mano o módulo de Front-end do Be MEAN terá ATomic Design com Stylus <3

Eu uso há um bom tempo um Atomic Design modificado por mim.

[suissa]

@brunoravanhani como eu odeio a Trivago, não posso nem ler essa palavra, toda hora passa essa maldita propaganda!!!

[suissa]

@afonsopacifer https://www.google.com.br/search?pws=0&hl=pt-BR&source=hp&q=nomadev+atomic+design&gws_rd=ssl

[afonsopacifer]

@suissa, Eu to ligado nesse módulo lindo que vem por ai <3,
e to por dentro dos artigos no Nomadev. Lá que eu ouvi sobre os conceitos de Atomic Design pela primeira vez, grande referência :)

[rfviolato]

Estou utilizando o SUITCSS e venho gostando muito de trampar com ele pois toda minha estrutura de aplicação anda voltada a componentização, e nisso o SUIT me atendeu bem demais.

Gosto que ele é um pouco mais "loose" em relação ao BEM, pois aceita classes globais como utilities e classes de estado.

Dêem uma conferida, pra quem tá utilizando estrutura de componentes em suas aplicações, recomendo fortemente.

https://suitcss.github.io/

[lnfnunes]

@willianjusten uma dúvida prática sobre o RSCSS, no seu exemplo:

.shopping-card {
  > .title { /* ... */ }
  > .title.-small { /* ... */ }
}

Se o .title do shopping-card é o mesmo estilo do .title de outro(s) componente(s) que faz parte de toda identidade visual do site, como vc costuma utilizar?
Ficaria estilos repetidos para isolar os componentes mesmo ou usaria algo na linha dum placeholder do sass para evitar replicação de código ?

Pergunto isso, pois em comparação com o atomic design por exemplo, entendo que teríamos um átomo .title que é visual igual em qualquer lugar que o colocarmos, pois não possui hierarquia de especificidade igual o rcss propõe.

[willianjusten]

Então @lnfnunes, vai depender muiiiito do seu projeto. Se você precisa que os módulos sejam completamente independentes e funcionais onde quer que estejam. Não vai ser uma cópia, pq esse módulo pode ser portado para diversos sites diferentes, seguindo o reaproveitamento.

Se for dentro de um mesmo site, você pode criar placeholders ou usar a edição do title para o componente, mas o componente continuar receber a classe pai que teria todas as regras principais.

[dougaraujos]

@willianjusten Comecei a implementar o RSCSS e surgiu uma dúvida. Supondo o seguinte código:
<header class="header><div class="content"><img src="logo"/></div></header>

Quando possuo um componente (header), onde eu preciso de algum wrapper (content) intermediário que define limite de largura da página ou grid para os elementos (logo), como proceder nos seletores ?
Utilizo .header > .content > .logo ? Crio outra classe para o wrapper .header-content > .logo para garantir menos aninhamentos ?

[felipefialho]

@dougaraujos Você chegou no exato motivo de eu ter parado de usar RSCSS.

[dougaraujos]

@lfeh Haha, e qual alternativa você encontrou ?

[felipefialho]

BEM + Atomic CSS (esse sempre usei, mas usava com conjunto com o RSCSS).

Ainda uso uma coisa ou outra de RSCSS quando preciso modificar um elemento, mas não mais toda a metodologia.

[ktquez]

@dougaraujos
Nesse caso, você faria isso mesmo .header-content > .logo
http://rscss.io/pitfalls.html