SMACSS: A Arquitetura CSS Mais Conhecida

[@luciuscarneiro]

Não desanima, cara! Seu conteúdo é top e você ainda vai crescer muito por aqui. Parabéns pelo material e obrigado por compartilhar o conhecimento!

[@dpwoficial]

Muito obrigado pelo comentário, Lu! Tô desanimado não; pelo contrário, tô animadasso com muita coisa que ainda vai ter no canal! :D

[@juniofigueiredosouza7290]

Tô triste por não poder comprar o teu curso. Espero que você não pare o curso, para que em outro momento eu possa comprar. Nunca vi ninguém ensinando como você ensina. Obrigada por compartilhar seu conhecimento aqui no KZbin, ajuda muito.

[@dpwoficial]

Entra na turma lá, rapaz, ainda dá tempo. Pega em suaves prestações.

[@JeffersonSilva-bq2ky]

Estou começando a estudar HTML e CSS e já sinto a necessidade de uma organização de estilo e arquitetura. Ainda falta muita coisa a aprender é claro, mas já estou extremamente satisfeito com os vídeos disponibilizado aqui na DPW pelo Tárcio. O cara manja muito e tem uma didática excepcional, tornando fácil o aprendizado dos conteúdos. Está super de parabéns e com certeza ganhou mais um escrito! Sucesso cara 🙏

[@dpwoficial]

Muito obrigado pelo comentário, Jefferson! Sucesso pra gente! o/

[@ramonb8085]

Muito top, obrigado! Atualmente, entre SMACSS e ITCSS, qual está sendo sua preferência? Poderia fazer um vídeo falando sobre ITCSS e seus pontos fortes.

[@dpwoficial]

Ambas são boas, na real, depende das características do projeto etc. Mas acredito que ITCSS contemple mais as necessidades mais modernas de CSS. A gente tem muitas aulas sobre ITCSS no nosso curso, explicando bem a fundo, mas, realmente, no canal ainda não colocamos, né? Vou ver se faço um apanhado geral e publico, ok? vlwww

[@ramonb8085]

@@dpwoficial Obrigado pela resposta! Na minha opinião, aqui no Brasil o seu canal é o que tem mais qualidade quando se fala de CSS, sempre é o ponto de referência que eu procuro. Quanto ao curso eu nunca cheguei a ver uma janela aberta, infelizmente sempre está em fila de espera rsrs Ter um vídeo aqui no canal falando sobre ITCSS seria muito bom, principalmente explicando as diferenças entre objects e components que é a parte que parece ser a mais confusa pra quem tá iniciando nesse assunto de arquitetura CSS. Pelo que eu entendi, em SMACSS as partes de layout ficariam separadas na pasta layout e teríamos apenas uma pasta para os components, já em ITCSS parece que tudo é tratado como components, mas os components menores que são reutilizáveis em qualquer lugar vão na pasta objects. Seria isso mesmo? Essas diferenças causam uma certa dúvida inicialmente.

[@thiagolaian8049]

"um mediano constante é melhor que um prodigio instavel." Que frase foda!!

[@dpwoficial]

Esse é nosso lema. o/

[@jorgeteixeira9184]

Cara, vejo que muitos devs correm do CSS, isso me faz querer aprender ainda mais, achei seu canal e desde então estou sempre aqui. Parabéns pelo conteúdo, o melhor de CSS que já vi. Deus o abençoe!

[@dpwoficial]

Aeee, Jorge! vlwww É engraçado, mas, de uns anos para cá, também cheguei à conclusão de que muitos devs têm medo de CSS... =P

[@eddev13]

Parabéns pelo trabalho Tárcio, realmente você além de ter uma disposição enorme pra passar conteúdo de qualidade, sabe como fazer maravilhosamente bem essa tarefa. Front-end ensinado por você é certeza de progresso. Sucesso sempre :)

[@dpwoficial]

Que isso, muito obrigado pela consideração, Ed! Sem palavras... :')

[@Anselmme]

Muito bom!

[@dpwoficial]

vlwww

[@felipe_crea]

Que buen video, muchas gracias. Felicitaciones.

[@dpwoficial]

¡Muchas gracias!

[@eridhonson]

Muito obrigado pelo conteúdo.

[@dpwoficial]

De nada. :)

[@yurioliveira6066]

Obrigado por compartilhar seu conhecimento. Só video de qualidade !!!!

[@dpwoficial]

Vlw, Yuri!

[@vitorduggen3637]

Muito bom seus conteúdos, estou curtindo demais as lives!

[@dpwoficial]

Muito obrigado pela força, Vitor! 👊

[@lukebro9585]

muito bom irmão, obrigado pela aula!

[@dpwoficial]

Imagina. Tamos aê. vlwww

[@daviafonso4098]

Muito bom seu conteúdo to aprendendo muita coisa

[@dpwoficial]

Maravilha, Davi. Se inscreve e ativa o sininho para receber nossos próximos conteúdos. :)

[@SafirahConnect]

Oi dpw, uma dúvida no minuto 59:00 em diante quando você fala sobre o tema. Na parte as modificações que serão feitas quando no :root () receber a classe .easter .easter:root, o body e o .module-picture precisam necessariamente de ter essa classe .easter selecionada também no CSS, ficando desse jeito: .easter .module-picture e .easter body não é? Porque mesmo você falando que precisa apenas colocar esse arquivo easter.css para carregar por último que ele sobrescreve, só isso não vai adiantar se você não colocar a classe .easter tanto no body como no .module-picture, né? Porque pode acabar sobrescrevendo estilos indesejados se você não colocar uma certa restrição.

[@dpwoficial]

Oi, Sah, tudo bem? No caso de usar classes, realmente precisaria de add ela no body. Entretanto, se estiver usando a abordagem de variáveis CSS para estabelecer as cores, dimensões etc. (particularmente, prefiro), basta chamar a nova folha de estilos que ela já vai sobrescrever os valores das variáveis e, consequentemente, alterar para as definições do tema. Att

[@SafirahConnect]

@@dpwoficial Ah sim, entendi. Obrigada Dpw, ótima didática! Me ajudou muito!

[@laissa1207]

Muito obrigada por esse conteúdo super completo!

[@dpwoficial]

Imagina, tamos aê. :)

[@flacmb]

Esse vídeo virou uma thread aqui pra mim. Tive que olhar diversas tecnologias mencionadas por você aqui na live. Surgiu uma pergunta quando fui olhar tailwind. É possível usar tailwind com o Sass ou são duas maneiras diferentes de lidar com CSS? Desculpe a pergunta, estou aprendendo bastante sobre programação e o seu canal me ajuda muito!

[@dpwoficial]

Opa, Flávio. Fique à vontade para perguntar. Eles servem para coisas diferentes: - Sass: pré-processador CSS - Tailwind: biblioteca de utilitários Nada impede de usar ambos em conjunto; inclusive, consta na documentação do Tailwind sobre isso: tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus Abs

[@alenakamura5652]

Utiliza o Notion ele é muito bom

[@dpwoficial]

humm, interessante. Boa dica!

[@brunoresendesantos45]

Ia recomendar exatamente a mesma coisa!

[@clintonrocha4980]

Mt bom o video/live, uma dica, tenta fazer live na Twitch, talvez vc encontre mais publico por lá.

[@dpwoficial]

Lá tem bastante público dev? Ou é mais para gamers?

[@clintonrocha4980]

@@dpwoficial Eu diria que lá tem de tudo um pouco, a comunidade dev Brasileira só aumenta

[@BSK_Rick]

Muito bom

[@dpwoficial]

vlwww

[@vandersonec]

As media query vão em layout?

[@dpwoficial]

Geralmente, sim, mas não é uma regra fixa.

[@vandersonec]

Obg

[@dpwoficial]

De nada, @@vandersonec

[@anarktv8098]

Excelente video. Pessoalmente não fã do Sass. Talvez um caso raro rs Mas percebo a grande utilidade da diretiva ''use'' que ele possui. Da aula me fica uma duvida: Ao executar a arquitetura Smacss, irá gerar diversos arquivos CSS para incorporar ao HTML. Isso prejudica de alguma forma o carregamento ou renderização do site? Com a utilização da diretiva Use do Sass, daria para incorporar ao HTML apenas um unico arquivo de CSS externo?

[@dpwoficial]

No Sass, tem um recurso chamado "Partials": se você colocar o nome de um arquivo com o primeiro caractere "_", ele não vai gerar um arquivo CSS na compilação. Geralmente, usa-se todos os arquivos modulares como partials sendo todos importados por um arquivo que, este sim, vai gerar um CSS no final das contas. Dá uma olhada na estrutura do nosso BFB para você ver a prática: github.com/desenvolvweb/basic-front-boilerplate/tree/master/sass

[@Hagurash]

Tmj

[@dpwoficial]

E aê? Gostou do vídeo?

[@daviafonso4098]

Pq que o code pen n usa o monaco editor do vscode

[@dpwoficial]

¯\_(ツ)_/¯