Entendimento sobre "objetos" no ITCSS

[akfzambrana]

Bom dia pessoal

estou trabalhando com ITCSS e estou curtindo muito, ele é quase perfeito para o tamanho e tipo de projetos que temos aqui.
A questão é que estou tendo um pouco de dificuldades em saber quando tenho um "objeto" e quando tenho um "componente".
Alguém pode me ajudar a entender melhor? 😺

[bbbbruni]

@akfzambrana Eu utilizo também e gosto muito, tomei como base esse post do Willian Justen https://willianjusten.com.br/organizando-seu-css-com-itcss/

[renatogalvones]

@akfzambrana Geralmente tento usar como raciocínio o seguinte:

• Um objeto pode conter componentes.
• Um componente não pode conter outros componentes, já que ele é a camada final e mais específica.

Tenho tido resultados bem bacanas. =]

[bernardodiasc]

Meu entendimento disso é por exemplo, analogamente, pessoas seriam objetos enquanto @akfzambrana um componente. :)

Na pratica, sem analogia, tenho por exemplo estilos de forms e inputs declarados como objetos e o formulário de login sendo um componente.

[danilovaz]

@akfzambrana Eu uso ITCSS também, eu penso da seguinte forma:

Objetos:

• Abstratos.
• Podem ser utilizados em vários lugares do seu projeto.

Componentes

• Pedaços específicos da sua UI.
• Reutilizáveis, sim. Mas utilizados com propósito específico.

Exemplo:

Posso ter um Objeto search-form.styl que será responsável por definir o padrão de todos os searchs do projeto. E posso ter 1 componente search-post.styl que define uma UI específica de search dentro de uma listagem de posts e 1 componente search-user.styl que define uma UI específica de search dentro de uma listagem de users. Ambos herdam estilos do search-form.styl e definem suas estilizações específicas.

Uso o ITCSS aliado ao RSCSS e essa camada de objetos/componentes me ajuda muito.

[eduardojmatos]

@akfzambrana estamos usando aqui na GetNinjas, e realmente ficamos na dúvida sobre o Objects que ele descreve (aliás, no site não tem nada, só os slides do SpeakerDeck.

Nós acabamos ignorando o conceito de Objects no projeto novo que estamos tocando. Embora tenhamos algumas classes que fazem exatamente o que ele descreve lá nos slides.

Objects são normalmente padrões não estéticos, espaçamento, margin, assim como ele mostra no slide lá. Pra gente, não fez sentido, pois usamos o BEM pra definir componentes. Os espaçamentos optamos por usar classes do tipo wall, spacer-section-small, space-section-large, etc.

Ele cita isso na apresentação, de que, se não for usar OOCSS, não precisa se importar com o Objects.

[eduardojmatos]

@akfzambrana mudei o título pra "Entendimento sobre 'objetos' no ITCSS", tudo bem? 😄

[akfzambrana]

Eu ja vi varios artigos incluindo o do William Justen e fiquei muito confusa com esse negocio justamente pq não usamos (e eu abomino kkk) OOCSS, mas se entendi, acho q to aplicando certo o conceito, pois no momento tenho dentro de "objetos":

• Classe wrapper (largura especifica e centralização do conteudo)
• Placeholder de clearfix
• Classe para elementos específicos para leitor de telas
• Classe que faz com q meu conteudo vire display flex

o que acham? sera q todas são realmente objetos?

[felipefialho]

@akfzambrana Também não curto OOCSS, só aplico para coisas muito especificas. Como um widget que vai ser manipulado via CMS, mas dai estou tentando implementar esse esquema -> #339

[akfzambrana]

@danilovaz aqui nos usamos algo q estou denominando de Caipirinha CSS pois por enquanto estamos usando:

• Conceitos do Atomic design para separação dos componentes, elementos, etc
• ITCSS para a arquitetura dos arquivos
• Bom senso para nomenclatura de classes
• Alguns CSS namespaces para modificar as classes nos componentes e separar responsabilidades (comportamento e layout)
• Custom attributes para manipulação do grid

Essa mistura toda esta funcionando ate o momento, mas estamos em fase de desenvolvimento então um outro dia conto pra vcs como ficou se resolveu nosso problema ou não kkkk

[akfzambrana]

Legal @lfeh, a gente ta começando a usar algumas coisas muito especificas com custom attributes e ta resolvendo a parte q tinhamos problema q era colocar largura especifica em elementos de form

[felipefialho]

Bom senso para nomenclatura de classes

@akfzambrana Eu era radicalmente contra, mas sério, experimenta o BEM, vale a pena.