cssbr | Unsorted

Telegram-канал cssbr - CSS Brasil

2419

Grupo técnico sobre CSS. ⚠️ ATENÇÃO: - Para evitar advertências não esqueça de ler as regras com o comando /rules. - Para reportar alguma mensagem utilize o comando /report.

Subscribe to a channel

CSS Brasil

https://frontendmasters.com/blog/understanding-css-corner-shape-and-the-power-of-the-superellipse/

Читать полностью…

CSS Brasil

As regras para CSS Brasil são:

Clique aqui para ler as regras - /channel/cssbr/57036

Читать полностью…

CSS Brasil

E vc não sai do tailwind way

Читать полностью…

CSS Brasil

Ademais não tem nenhum problema tecnicamente falando vc declarar as classes várias vezes

Читать полностью…

CSS Brasil

Pelo o que entendi, ele quer usar os estilos do TW para criar classes personalizadas, ou seja, ao invés de componentes, seria a classe de fato. Similar ao que o Bootstrap é.

Читать полностью…

CSS Brasil

Mas é pior, na minha opinião, você sair do padrão dele. As vezes não compensa utilizar ele se for o caso

Читать полностью…

CSS Brasil

Tá usando HTML puro e CDN como o mano ali falou? Se tiver usando o react a doc do tailwind fala pra vc componentizar elementos que vc repete

Читать полностью…

CSS Brasil

Que está sendo desenvolvido.

Читать полностью…

CSS Brasil

Se você usar a versão CDN, terá que repetir mesmo.
Usando via empacotador (Webpack, Vite), não terá problema em criar as repetições se forma fácil.

Читать полностью…

CSS Brasil

Repetição de classes.

Читать полностью…

CSS Brasil

E eu não queria usar o Javascript nisso

Читать полностью…

CSS Brasil

Alguém disse a palavra regras?

Читать полностью…

CSS Brasil

Então, tudo isso da pra fazer com tailwind, se vc quiser vc pode, não quebra, mas não faz sentido

Читать полностью…

CSS Brasil

Se for só seu, lkkkk cê pode fazer o que quiser, mas se vc tiver trabalhando com outras pessoas a pessoa vai ver a classe, ficar (?) procurar na doc, no tailwind config só pra com custo ver que vc declarou a classe no CSS lkkkkkk

Читать полностью…

CSS Brasil

Gente, vocês acham que faz sentido misturar classes CSS com classes do Tailwind CSS? E vocês já fizeram isso?

Читать полностью…

CSS Brasil

As regras para CSS Brasil são:

Clique aqui para ler as regras - /channel/cssbr/57036

Читать полностью…

CSS Brasil

Com nested selectors, pode criar algo assim:

.social-links a {
text-decoration: none;
color: rgb(var(--gray));

&:hover {
color: rgb(var(--gray-dark));
}
}

Читать полностью…

CSS Brasil

As vezes vc criar um componente SocialLink já alivia seu incômodo

Читать полностью…

CSS Brasil

Se vc tá estilizando o mesmo elemento e se incomoda de repetir a classe várias vezes pois são vários elementos, a doc recomenda vc criar um .map e criar esse elemento com um laço de repetição OU criar um componente desse elemento repetido

Читать полностью…

CSS Brasil

@CamiloMicheletto
Estou no Astro:
E nele é possível fazer o HTM e CSS no mesmo arquivo.

Читать полностью…

CSS Brasil

Essa é uma característica ruim do tailwind, ele te obriga a resolver esses problemas no template

Читать полностью…

CSS Brasil

É estranho ter que mudar várias classes

Читать полностью…

CSS Brasil

O problema é mesmo no código.

Читать полностью…

CSS Brasil

Mas toda classe tailwind que vc utilizar vai ser declarada na folha de estilos só uma vez

Читать полностью…

CSS Brasil

Todas as âncoras deveram possuí os mesmos estilos.

Читать полностью…

CSS Brasil

O grande problema é a repetição de estilos.

Читать полностью…

CSS Brasil

No geral, os documentos HTML têm um folha de estilos adicionais, onde as modificações do arquivo base ficam.

<head>
...

<link href="tailwind.css" rel="stylesheet" />
<link href="custom-styles.css" rel="stylesheet" />
</head>


Neste exemplo, seguindo a regra do CSS: o que vem depois sobrepõe o que já existe, tudo que estiver no custom-styles.css irá se sobrepor às regras do TW.

Além disso, o Tailwind é focado em criar componentes, logo, um botão estilizado nada mais é que um componente estilizado sendo re-estilizado.

Читать полностью…

CSS Brasil

Exemplo:

<style>
.social-links a {
text-decoration: none;
color: rgb(var(--gray));
}
@media (hover: hover) {
.social-links a:hover {
color: rgb(var(--gray-dark));
}
}
</styles>
}

Читать полностью…

CSS Brasil

Provavelmente o que vc tá fazendo com CSS pode ser feito com tailwind

Читать полностью…

CSS Brasil

E já estou achando que vou continuar nele mesmo.

Читать полностью…
Subscribe to a channel