A Maneira Correta de Utilizar o CSS
ฝัง
- เผยแพร่เมื่อ 4 ก.พ. 2025
- Após diversas perguntas nas redes sociais de como utilizar o CSS com o HTML viemos te mostrar as formas de fazer isso e dizer qual a maneira certa de utilizar o CSS.
Assine a DevMedia hoje mesmo e aprenda tudo sobre CSS e programação:
www.devmedia.c...
Vídeos citados:
HTML o ESSENCIAL pra programação Front-end
• HTML o ESSENCIAL pra p...
PROGRAMADOR FRONT-END NÃO É DESIGNER!
• PROGRAMADOR FRONT-END ...
== Sigam-nos nas redes sociais:
LinkedIn ➞ / devmedia
Facebook ➞ / devmedia.com.br
Twitter ➞ / devmedia
Instagram ➞ / devmedia.com.br
Tiktok ➞ / devmediaoficial
Pra galera que está falando sobre o Tailwind, calma que esse é um passo mais pra frente. Aqui estamos falando do CSS puro justamente pra quem ainda está iniciando no CSS sem o uso de framework. Mas quem sabe não gravamos um vídeo sobre o Tailwind no futuro 🤔
Queria sugerir um tema para o próximo vídeo, gostaria de ver um tipo de "vlog" de algum projeto sendo desenvolvido desde do zero pelos estagiários mostrando suas dificuldades, dúvidas e até momento de stress e no final a avaliação do Sênior/Pleno sobre o projeto desenvolvido, mas fica pra um vídeo continuação se o primeiro der certo :3
Os videos sao geniais, muito legal ver vcs, e eu aprendo muito!! Entre muitas risadas hahah o conteudo entra na minha memoria interna hahah vlw Esse canal e genial.
Ontem eu estava com dúvida e me cobrando para estudar mais o CSS, e hoje vocês postam esse vídeo hahahahahaha muito bom!
Muito bacana.
Uma das vantagens de se utilizar o estilo CSS em um arquivo externo é o reuso dele em todas as páginas, deixando a identidade visual mais uniforme, com o mesmo conjunto visual em todas elas.
Valeu, abraço!
Vcs são o css do meu html. Amo vcs
[me != me]. [me += you].
😍😍😍
Estruturação é essencial na utilização do CSS, o recomendável é sempre usar externo e sempre pensar nele como um conjunto de estilos, por exemplo se você for criar um estilo de um botão vermelho, atribua ele à uma classe como "btn_red" ao invés de replicar o código pra cada tag button do seu html, só estilize algo por tag se você tem certeza que esse estilo não será repetido no código.
Varia com a necessidade do programador, nem sempre é preciso criar um arquivo externo pra você utilizar um css.
Mas nesse caso, não seria melhor especificar a função desse "Botão" em vez da cor?
Exemplo:
se for um simples botão de login, num seria melhor colocar "btn_login".
Assim ficar simples e objetivo para quem for da manutenção no código ou apenas alterar a cor como você falou.
E da também para simplificar o sistema de cores usando o "root", depois c quiser trocar a cor e só muda na "raiz" sem precisar ler linhas de código em "projetos grandes"
Eu só gosto de fazer css externo, foi como aprendi no primeiro vídeo de um curso que fiz. Acho que se eu aprendesse o interno primeiro não me acostumaria com o externo. Mas cada um tem seu gosto e eu prefiro o externo mesmo.
@@pczim5439 a questão era somente pra exemplificar o porque se deve estilizar a classe ao invés de tag html, por isso disse "se for o caso de estilizar um botão vermelho", mas sim o ideal é que o nome da classe seja o mais intuitivo, por exemplo, eu utilizo bastante as funções quando estou estilizando em SASS, por isso é importante aprender a estruturar o CSS em módulos, criando pastas para variaveis, funções, animações, sessões do código etc...
@@flamengosrn6874 entendo, mas em um ambiente de trabalho é muito importante fazer com que seu código possa ser lido, entendido e replicado sem grandes preocupações, quão mais limpo e autoexplicativo ele for, melhor para os programadores que estão trabalhando com você no projeto.
A dupla favorita dos inscritos, tico e teco, tunico e tinoco,.
Pink e Cérebro 🧠 🤣🤣🤣
Gostei muito do vídeo, conceituo bem alguns fundamentos pra quem está pegando desenvolvimento web
isso ia ser ducaraio mesmo, ainda mais agora que eles deram as cara de novo! Já estava ficando preocupado!
Ótima explicação
Vale a observação de que a boa prática para estilização de e-mails é que seja feita inline.
Sou estudante de Análise e desenvolvimento e um dia vou ter o conhecimento desses dois aí.
Temos certeza disso, Lucas. Invista nos estudos que você vai longe.
Abraços! 🤗
Gente eu estava justamente conversando com o Professor Rodolfo sobre o assunto que vocês abordaram muito obrigado por esclarecer está dúvida.
Opa Roberto, o vídeo chegou no momento certo, né?! Conte com nosso suporte para te auxiliar no que for preciso. 🙏💚
Adoro a galera do DevMedia. Estou conhecendo mais do CSS no momento e me cadastrei na plataforma, pensei que tinha um período teste para explorar e ver como as coisas funcionam, mas não tem ou eu que fiquei confusa. Sucesso para vocês!
Mesmo que não seja o foco de um programador, o CSS é legal demais. Quem é que não gosta de ver uma identidade visual primorosa numa página?
Disse tudo, Alejandro. O CSS é essencial para quem está iniciando. 🥰🙏
Conteúdo muito legal, parabéns 🎉🥳
Dupla sertanejo boa da gota, vem até com a camisa combinado.
Muito bom assunto top
Rosa e Rosinha HAHAHAHA
Valeu, Carlos 💚🙏
Pensei que o vídeo iria tratar sobre a forma correta de estilizar as coisas. Vejo por aí que tem um milhão de maneiras pra centralizar algum elemento, depende muito de onde ele está localizado e do que ele é.
Façam mais videos sobre css :)
Pode deixar, Gabriel. Tmj 🙏✍️
Faz um vídeo das melhores práticas de como organizar o css, estou treinando fazendo uma página de currículo, está me dando um desespero pq parece que está tudo jogado.
PS: Tô na metade da página e ja tenho 146 linhas de css (Já estou colocando responsivo)
Vontade de pegar esse cubo e montar Rsrsrs
Próximo desafio 🤣
Faz um tempo que queira esse vídeo
Temos conteúdos maneiros essa semana, continue acompanhando a gente. 🙏💚
@@devmedia.oficial também seria interessante um vídeo de dicas ou conversões para o meu css ficar mais organizado / fácil de ler
Video top
A manos, vou falar a verdade agora, quando estou no react e tem componente dentro de componente, um pouquinho de style in line resolve o b.o na hr kkkkk, e se for só pelo fato do código não ficar legível, o que falar então do chakra ui, tailwind, bootstrap e outros??
Mano kkk style in line é vida, da preguiça demais ir lá no arquivo TS e criar o estilo kkkkkkk
E fazer uma folha de estilo só para o responsivo é uma boa idéia ?
Você pode deixar um folha única, e depois aplicar um média query para isso dentro do css. Aí você só adiciona as funcionalidades para o site ficar reponsivel em uma tela mobile
Eu gosto do CSS interno como no vuejs que aí cada componente tem lá seu próprio código html, CSS, javascript/typescript dentro do próprio componente e tudo separado cada um no seu canto, que é um dos motivos de eu não gostar de react porque ou o CSS fica lá dentro misturado com javascript e javascript já se mistura com html formando js e para mim isso é um caos horrível de se olhar ou eu tenho que ficar criando 1 arquivo para cada componente ficando com 300 mil arquivos o que eu detesto também.
Meu css nao pega nao sei mais p que fazer
Ja tentei varias vezes e não sai de forma nenhuma
E o Tailwind?
Alguém conhece sites com layout's/design's no figma para treinar codificação de sites?
tailwind ?
Mas o CSS dentro do é bem mais prático do que ficar tendo que ir na pasta CSS modificar o arquivo *.css.
Css mais javascript é divino slc
brabos
😎💚
Salve
Fala você, Will 🤟
Carai, Tailwind então é ruim seguindo o lance do inline?
Nao necessariamente , normalmente eu uso com react e fica muito de boa. Ate pq a sintaxe do tailwind e em shothand
Calma lá 🤣
Tailwind é um passo a frente. Aqui estamos falando mais com a galera que ta iniciando, que está pegando a base com css puro antes de se aprofundar em bibliotecas e frameworks.
@@devmedia.oficial Mas a premissa não seria a mesma, "Colocar 10, 15 propriedade tudo inline?", "Seu HTML vai acabar ficando muito sujo", "Dificuldade na manutenção desse código"?
Mas o tailwind não é inline, são classes utilitárias. É mesma coisa que criar uma classe 'btn' e estilizar num arquivo style.css.
A diferença está na produtividade e versatilidade que o Tailwind proporciona.
Um detalhe muito importante é que Tailwind é comumente usado em component based frameworks( Vue
@@kusterjoao Classes utilitárias, mas é utilizado dentro da linha que tu queira modificar, não? Eu não consigo usar o Tailwind sem ter a documentação dele aberta em outra aba.
só disse o obvio4
Tailwind vendo esse vídeo: Hi carai f*deu
😂 Mas aí é um passo mais a frente. Aqui estamos falando do CSS puro sem uso de framework.
Isso é só uma convenção!!!
Eu também acho besteira, pq simplesmente é um atraso.
In-line, interna, externa. Tenho uma explicação melhor pra isso aí.