Acho que só a curva de aprendizado, já que o Sass não muda em quase nada pro css que já conhecemos, já o styled é uma lib com uma sintaxe diferente, no fim a utilidade é a mesma, mas acho que por ser um pré-processador, talvez a performance com Sass tenha menos custo, mas não sou especialista. E no styled components tem algumas vantagens, como a que o professor mostra no vídeo, como poder usar js no código, já que é tudo declarado dentro de uma template string.
Caaara, valeuzao!!!! Baita honra receber um comentário desses, espera só pq pra somar nesse vai ter as paradas com tema customimzado e tal, tem mt bola pra rolar ainda hasuhusa
Sensacional seus vídeos cara, demonstra ter um claro conhecimento e domínio sobre o assunto e passa de uma maneira muito simples e clara, tem muito vendedor de curso por aí, os marketeiros "a la primo rico", que não tem 1/10 desse seu talento.
só pra comentar que amei a referência, esses vendedorzinho de curso à lá jimo rico é uma das piores coisas que rolaram por essas redes nos ultimos tempos. Gente que tem conhecimento de fato sobre muitas vezes o que é o próprio ofício e democratiza o acesso à esse conhecimento em uma rede como o TH-cam são pessoas fodas!
@@DevSoutinho Quando der, pode ser legal mostrar como usar as props dentro dos styled components. É algo que vez ou outra preciso usar e parece ser bem útil. E aquele 'css' que vi na imersão de react também! Hehehe
Parabéns Mário, conheci styled-componet por vc e já tô conseguindo aplicar algumas coisas. Tenho q parar de preguiça e ler a documentação dele para aprender um pouco mais sobre as maravilhas que essa lib faz 😅
Se eu eu precisar criar um Componente de um input reutilizável, onde poderia passar as props. Qual seria a melhor forma de estilizar ele com styled components? Eu crio um outro Componente só pro estilo e importo dentro do componente de input ou eu crio o estilo dentro desse componente de input mesmo?
Fala Mario, tranquilo ? É uma má pratica ter um App.css somente com alguns resets basicos como padding, margim, e border-box ? Vi que tu mostrou ai no vídeo mas naão ficou muito claro pra mim.
Naaaam, na real eu vou fazer um vídeo com mais calma explicando isso ai complementa. N tem erro n, o lance é como dar nome pras coisas pra ficar mais reusável
Soutinho, em relação a performance, como fica trabalhar com styled components se eu tiver trabalhando com um projeto gigante? É recomendável? Fiquei com a impressão de que o styled cria um componente para cada estilo... e aí não sei se isso ajuda a pesar mais o carregamento da página. Não sei se to viajando...
Com relação a performance pode ficar tranquila, eu rodo em projeto grande e vai suave. O que vc tem que ficar esperta só é ter um monitoramento de first input delay, Pq as vezes em alguns componentes quando vc faz muita magia no CSS pode ser prejudicial tipo fazer muitos loops e tal. Mas no geral é imperceptível
Como você faz para a IDE reconhecer a escrita CSS mesmo em um arquivo tsx? Aqui eu desenvolvo fazendo css da cabeça mesmo, sem autocomplet nem nada, e isso dá uma atrasada.
Só um disclaimer: a palestra sobre styled-components no FrontInSampa não foi feita só pela Kete Rufino, como é fácil notar no próprio título, tendo duas pessoas no palco no frame que você capturou ou mesmo assistindo à talk inteira. 😅
Opa, falha minha! Por ter conversado com ela da talk acabei esquecendo o quote pra ti, vou atualizar nos links da descrição com errata, foi mal! (Mas segue no frame do video seu nome lá no título certinho)
Me tira uma dúvida por favor, teria alguma diferença utilizar esse theme x setar variaveis do css? acho bem mais fácil criar no meu :root as variáveis que irei usar do que ter que ficar criando varias funções no decorrer da aplicação, tem alguma diferença de performance etc?
Cara, no geral é o poder de vc poder receber props e lidar com dados em tempo real do JS pro CSS mesmo, a nível de performance vc n perde num nivel que prejudique, da pra usar tranquilo
Estou criando um projeto pessoal e utilizando Styled Components, mas para implementar reponsividade entre dois componentes foi um difíclil, mas consegui, porém não acho que esteja da melhor maneira, creio que este seja um assunto interessante para falar.
Muito daora, mas como eu faço pra trabalhar com a propriedade transition? Tentei seguir da mesma forma como fazemos no CSS mas não tá rolando. Ótimo conteudo, sempre salvando minha vida haha
@@DevSoutinho entendi, no caso eu faço minhas medias dentro daquele escopo de tag que abrir tipo styled.h3` font-size:60px @media( ) ..` fica meio uma media queries individual pra aquele tag.
Caaaara, não conta pra ngm, mas vai rolar material UI no próximo vídeo :) Eu tenho um ultra mega bom caso de uso pra ele e quero falar sobre vantagens e desvantagens
Gostei do video! Alguém sabe como faz para mostrar os highlights do CSS dentro do styled? Quando coloco o texto dentro do `` o VSCode lê como string e fica tudo na mesma cor.
Aliás, no meu está sem o highliths do VSC e também sem o autocomplete... o problema está apenas dentro do styled.hr`problema aqui`... no resto do código tudo funciona bem.
uai que estranho, eu fiz isso pausando com K e usando as setas e só funcionou na primeira vez dai eu fui tentar de novo e mesmo fazendo igual (pausando com K) as setinhas avançam 5 seg do video 🤔🤔🤔😪
so vi duas pessoas explicarem conteudo dificil de forma facil assim vc e esse outro aqui th-cam.com/video/m2v4sSg26IA/w-d-xo.html, mas adorei de verdade aquela tua serie do flapi bird, muito show, gostaria muito de ver um serie que ensinasse a fazer um jogo tipo o do MARIO, considere fazer uma desse tipo no futuro!
Meu, muito obrigado de verdade!!! Fico muito feliz lendo comentários tipo o seu, da até um gás extra asuhshua Eu tenho mt interesse sim em fazer um jogo estilo mário, talvez como um spin off do flappy bird e tal, to vendo direito. Mas por hora vou terminar a primeira série, que passou da hora já huashusa
sasauhsahuuhsa ta ai um vídeo que ta faltando aqui no canal, eu fiquei feliz que o pessoal implementou o "display carrossel" que eu tinha imaginado lá atrás quando conheci
Amigo, algumas dicas caso aceite para melhorar seu canal NA MINHA OPINIÃO. Seu vídeo é muito corrido, mas não corrido de rápido, a velocidade tá boa. Quero dizer que tá corrido no sentido de sair jogando informação desenfreada pra cima de quem tá assistindo. Seria interessante você criar tópicos para quem tá assistindo, saber quando entrou e saiu de um assunto. Essas mudanças de tela entre código, sites aberto e somente você falando confundem! Fica muita informação bagunçada pra processar. A imagem com a fala é essencial para um entendimento mais aperfeiçoado, mas você só joga as informações, não tem uma organização nos seus videos. Você tem coisas que eu preciso aprender, mas EU RAFAEL não consigo assistir por causa dos pontos acima. Espero ter ajudado e peço desculpas se te ofendi!
${...} = "Ostentação bigodinho" hahahahahah Dahora mano hahahaha
sauhsahuhusa eu uso direto na vida
@@DevSoutinho me lembrou a Loiane com o:
[()] = "Banana na caixa" kkkkkk
Gostei demais, não vejo a hora de ter os outros vídeos.
#666
vai rolar!!!
Poucos perceberam essa mensagem subliminar, haha! #666@@DevSoutinho
Quando usar Sass e quando usar Styled Components? Pensando na parte técnica e de escalar em grandes projetos, qual é o melhor a se usar?
Acho que só a curva de aprendizado, já que o Sass não muda em quase nada pro css que já conhecemos, já o styled é uma lib com uma sintaxe diferente, no fim a utilidade é a mesma, mas acho que por ser um pré-processador, talvez a performance com Sass tenha menos custo, mas não sou especialista. E no styled components tem algumas vantagens, como a que o professor mostra no vídeo, como poder usar js no código, já que é tudo declarado dentro de uma template string.
Cara, essa habilidade de usar variável js no css me ganhou
confesso que me pegou no começo tbm ashusahu
Parabéns cara. Uma das melhores demonstrações de Styled que ví fazerem. Boa!
Caaara, valeuzao!!!! Baita honra receber um comentário desses, espera só pq pra somar nesse vai ter as paradas com tema customimzado e tal, tem mt bola pra rolar ainda hasuhusa
Sensacional seus vídeos cara, demonstra ter um claro conhecimento e domínio sobre o assunto e passa de uma maneira muito simples e clara, tem muito vendedor de curso por aí, os marketeiros "a la primo rico", que não tem 1/10 desse seu talento.
só pra comentar que amei a referência, esses vendedorzinho de curso à lá jimo rico é uma das piores coisas que rolaram por essas redes nos ultimos tempos. Gente que tem conhecimento de fato sobre muitas vezes o que é o próprio ofício e democratiza o acesso à esse conhecimento em uma rede como o TH-cam são pessoas fodas!
Muito bom seu conteúdo. Se tiver mais de uma tag dentro do Title, como definir um estilo diferente pra cada tag nesse caso?
Boooa Mario vídeo com qualidade, e um ótimo conteúdo, ansioso para a parte 2 já.
O roteiro ta rolando \ooo
brabissimo.. esse cara é bom de explicar.. obrigado.
Teus vídeos estão me ajudando muito nos estudos de react que iniciei
Caaara que massa saber, valeu mesmo!!! Se tiver mais dúvidas manda aqui que me ajuda a gerar temas também :)
@@DevSoutinho Quando der, pode ser legal mostrar como usar as props dentro dos styled components. É algo que vez ou outra preciso usar e parece ser bem útil. E aquele 'css' que vi na imersão de react também! Hehehe
Eu achava frontend a coisa mais monótona, mas você está me fazendo me apaixonar por essa frente... muito obrigado por tudo, Mario :)
Caaaara que massa ler isso!!! Isso até me deu ideia pra fazer um vídeo explicando como eu cai no Front End :)
Monótona? Então você nunca se irritou tentando fazer css na mão sem bootstrap, ou qualquer outro kkkk
Coé, irmão, tu praticamente matou minha task pra mim kkkkkkkk tudo de melhor pra vc
asuhsahusahuassuhauah obrigado!!! e pra tu também
Muito boa explicação. Ajudou muito Obrigado.
Tem algum extenção que ajude nesse processo?
Parabéns Mário, conheci styled-componet por vc e já tô conseguindo aplicar algumas coisas.
Tenho q parar de preguiça e ler a documentação dele para aprender um pouco mais sobre as maravilhas que essa lib faz 😅
Aeeeeee sauhsahushu bom o vídeo já tira as dúvidas mais iniciais e tal, qualquer dúvida mandai \o e manda link do projeto se for publico
Se eu eu precisar criar um Componente de um input reutilizável, onde poderia passar as props.
Qual seria a melhor forma de estilizar ele com styled components? Eu crio um outro Componente só pro estilo e importo dentro do componente de input ou eu crio o estilo dentro desse componente de input mesmo?
Cara o que eu faço é: crio um styled components Pra texto em geral. Ai crio um input a partir desse de texto só mudando a tag e reusando as props
eu já usava o básico do styled e não fazia ideia que tinha esse resto aí hahaha. ótimo vídeo
hehee é mais poder que o SASS ashuashuashu
Fala Mario, tranquilo ?
É uma má pratica ter um App.css somente com alguns resets basicos como padding, margim, e border-box ?
Vi que tu mostrou ai no vídeo mas naão ficou muito claro pra mim.
Naaaam, na real eu vou fazer um vídeo com mais calma explicando isso ai complementa.
N tem erro n, o lance é como dar nome pras coisas pra ficar mais reusável
Excelente vídeo sobre styled components!!!
Vaaaaleu Suyanne!!
Nossa Mario caramba sua explicação é muito didática, parabéns pelo vídeo! Ganhou mais um inscrito!
Valeu mesmo cara!!!
Esse canal é muito bom!!!!
Eu criei um arquivo só para variável, e ali eu coloquei as cores e outras variáveis, não sei se é o certo
5:38 Qual o atalho do vscode, ele usou pra alterar o h3 ?
Tu é fera demais!
Da pra trabalhar com templates de estilos em style components para ser usado no storybook por exemplo ?
Da sim!
O video com as boas praticas e organização com o styled veio? kkkkkk
Excelente video btw
Ele ta vindo asuhsauhas eu parei no meio do roteiro pra criar uma lib :X
No começo é foda de pegar o Styled, mas depois que aprende é um caminho sem volta hahaha uso ele em todos meus projetos!
siiim!!!!
Soutinho, em relação a performance, como fica trabalhar com styled components se eu tiver trabalhando com um projeto gigante? É recomendável?
Fiquei com a impressão de que o styled cria um componente para cada estilo... e aí não sei se isso ajuda a pesar mais o carregamento da página. Não sei se to viajando...
Com relação a performance pode ficar tranquila, eu rodo em projeto grande e vai suave. O que vc tem que ficar esperta só é ter um monitoramento de first input delay, Pq as vezes em alguns componentes quando vc faz muita magia no CSS pode ser prejudicial tipo fazer muitos loops e tal. Mas no geral é imperceptível
Topzera! Obrigado por compartilhar!
Opa, eu que agradeço assistir e ainda vir aqui comentar \o/
Como você faz para a IDE reconhecer a escrita CSS mesmo em um arquivo tsx?
Aqui eu desenvolvo fazendo css da cabeça mesmo, sem autocomplet nem nada, e isso dá uma atrasada.
Só um disclaimer: a palestra sobre styled-components no FrontInSampa não foi feita só pela Kete Rufino, como é fácil notar no próprio título, tendo duas pessoas no palco no frame que você capturou ou mesmo assistindo à talk inteira. 😅
Opa, falha minha! Por ter conversado com ela da talk acabei esquecendo o quote pra ti, vou atualizar nos links da descrição com errata, foi mal! (Mas segue no frame do video seu nome lá no título certinho)
@@DevSoutinho Menino Mário Souto sendo cobrado ao vivo
Estava precisando exatamente desse conteúdo kkkk pra melhorar meu app kkkkk MUITO OBRIGADO
sauhsauhsahu boooa!!! da uma olhada nesse video aqui tbm: th-cam.com/video/HGrXz6vHngI/w-d-xo.html
Me tira uma dúvida por favor, teria alguma diferença utilizar esse theme x setar variaveis do css? acho bem mais fácil criar no meu :root as variáveis que irei usar do que ter que ficar criando varias funções no decorrer da aplicação, tem alguma diferença de performance etc?
Cara, no geral é o poder de vc poder receber props e lidar com dados em tempo real do JS pro CSS mesmo, a nível de performance vc n perde num nivel que prejudique, da pra usar tranquilo
que video perfeito, faz mais :D:D
Vai rolar!!!!
Top! Existe alguma solução css in js para vannila js?
Cara eu nunca mexi, maaas me lembro de ter visto algo do genêro por aqui: cssinjs.org/?v=v10.4.0
Estou criando um projeto pessoal e utilizando Styled Components, mas para implementar reponsividade entre dois componentes foi um difíclil, mas consegui, porém não acho que esteja da melhor maneira, creio que este seja um assunto interessante para falar.
Qual dúvida tu ficou? a parte de reusar os breakpoints e tal?
O styled componentes é melhor que o Sass ?
Vídeo curto e que ensinou muito bem o conceito básico. Valeu!
OLHA ELE DNV! Só cresce meu amigo ❤️
OLHA VC DND!!! valeu mano
Muito daora, mas como eu faço pra trabalhar com a propriedade transition? Tentei seguir da mesma forma como fazemos no CSS mas não tá rolando.
Ótimo conteudo, sempre salvando minha vida haha
Eita, em que sentido tu fala?
Da uma olhadinha aqui tbm, tem váaaarios exemplos: developer.mozilla.org/pt-BR/docs/Web/CSS/transition
Perfeito esse vídeo. Tirou minhas dúvidas, muito obrigado.
Sensacional...
Muito massa o css através de componentes.
Booooa!!! se fizer um projetinho e quiser compartilhar só mandar aqui fico felizao de ver :D
@@DevSoutinho blz valeu
E como fica para aplicar as media queries com styled-components ?
Só escrever a media query igual no CSS normal ou igual no sass \o
@@DevSoutinho entendi, no caso eu faço minhas medias dentro daquele escopo de tag que abrir tipo styled.h3` font-size:60px @media( ) ..` fica meio uma media queries individual pra aquele tag.
O que são essas importações Header Footer?
Opa são parte de um vídeo anterior aqui do canal. Pode ignorar tranquilo ;)
Muito bom!!!, dar pra usar com sub-elementos no react-native tambem ??
O "labrador humano" kkkkk. Manda bem demais prof! #tmj, obrigado!
Parabéns pelo conteúdo.
Para quem tá começando e está usando libs como o material ui, tem como/vale a pena usar styled components?
Caaaara, não conta pra ngm, mas vai rolar material UI no próximo vídeo :) Eu tenho um ultra mega bom caso de uso pra ele e quero falar sobre vantagens e desvantagens
Ja me convenci.. quero aprender +++
Booooa!!! to montando o vídeo mais completão FAQ
Gostei do video! Alguém sabe como faz para mostrar os highlights do CSS dentro do styled? Quando coloco o texto dentro do `` o VSCode lê como string e fica tudo na mesma cor.
Aliás, no meu está sem o highliths do VSC e também sem o autocomplete... o problema está apenas dentro do styled.hr`problema aqui`... no resto do código tudo funciona bem.
Procura pelo plugin, styled components que fica show!
Tai, me convenceu.👌
Mario, poderia fazer algo sobre UI declarativa?
CLaaro!!
show!
Crlh perdi tudo no "ostentação bigodinhos" KKKKKKKKKKKKKKKKKKSKSKSJISJSOSS
#666 auahaauhaua
(Se pausar o vídeo "k" e usar "," (vírgula) e "." (ponto), vc caminha frame a frame, pra trás e pra frente haha)
Olha que essa eu n sabia sahuushauhas
uai que estranho, eu fiz isso pausando com K e usando as setas e só funcionou na primeira vez
dai eu fui tentar de novo e mesmo fazendo igual (pausando com K) as setinhas avançam 5 seg do video 🤔🤔🤔😪
@@salvimateus Owww, perdão, eu falei errado. Tenta sem o Shift, só apertando "," (vírgula) pra retroceder e "." (ponto) para avançar
@@GuilhermeTeixeira MANO haha valeu!
na primeira vez eu devo ter feito isso por extinto e na segunda eu usei as setinhas kkkkkkkkk
Baita canal
Valeu!!!
Perdi de novo com o ano meio apocalíptico afodase vou me inscrever é agr
Ahahahhahahah ta inscrito?
@@DevSoutinho ultra sim!
Quem será q é o Mario Preso?
Coé meu consagrado meu flappybird tá parado aqui só te esperando
Meu consagrado, eu to gravando o episódio final essa semana! Desculpa a demora
@@DevSoutinho q isso pô desculpa nenhuma irmão tá me ajudando demais e me desenvolvendo muito só tenho a agradecer
@@TheMycurse tamo junto \o/ Vai rolar, inclusive compartilha o link comigo do projeto \ooo
@@DevSoutinho opa!! github.com/rrosset91/flappy-bird-clone
so vi duas pessoas explicarem conteudo dificil de forma facil assim vc e esse outro aqui th-cam.com/video/m2v4sSg26IA/w-d-xo.html, mas adorei de verdade aquela tua serie do flapi bird, muito show, gostaria muito de ver um serie que ensinasse a fazer um jogo tipo o do MARIO, considere fazer uma desse tipo no futuro!
Meu, muito obrigado de verdade!!! Fico muito feliz lendo comentários tipo o seu, da até um gás extra asuhshua Eu tenho mt interesse sim em fazer um jogo estilo mário, talvez como um spin off do flappy bird e tal, to vendo direito. Mas por hora vou terminar a primeira série, que passou da hora já huashusa
10:07
#666 haushuashuas tive que ver em slow motion
Achei que você só usava Houdini CSS kkkkk'
sasauhsahuuhsa ta ai um vídeo que ta faltando aqui no canal, eu fiquei feliz que o pessoal implementou o "display carrossel" que eu tinha imaginado lá atrás quando conheci
Amigo, algumas dicas caso aceite para melhorar seu canal NA MINHA OPINIÃO.
Seu vídeo é muito corrido, mas não corrido de rápido, a velocidade tá boa. Quero dizer que tá corrido no sentido de sair jogando informação desenfreada pra cima de quem tá assistindo.
Seria interessante você criar tópicos para quem tá assistindo, saber quando entrou e saiu de um assunto.
Essas mudanças de tela entre código, sites aberto e somente você falando confundem! Fica muita informação bagunçada pra processar.
A imagem com a fala é essencial para um entendimento mais aperfeiçoado, mas você só joga as informações, não tem uma organização nos seus videos.
Você tem coisas que eu preciso aprender, mas EU RAFAEL não consigo assistir por causa dos pontos acima.
Espero ter ajudado e peço desculpas se te ofendi!
ofendeu nao mano! Obrigado pelos feedbacks e valeu mesmo! Vou tentando aprimorar
#666! hahahaha
#666
#666 hehehe
oi kkkkkkkkkkkkkkkkkkkkkk oi
mano, só queria saber quem deu dislike mds
#777
#666 kakakakaakak
666 👹👹👹
#666 ;)
#666 kkkk
#666 kkkkk
#666 asuhsahusahushu
#666 não, sou de Jesus.
Na boa styled components é muito feio, jesus.
#666
#6666
#666
#666
#666
#666
#666
#666
#666