douglasabnovato

Oct 27, 2021

2 min read

css no reactjs

Durante o desenvolvimento de uma aplicação, construí um trecho de código de estilização, logo no início, o que permitiu visualizar o detalhe da modificação de cada linha do css interferindo no elemento.

Ainda somente com a estrutura dos elementos do que se tornará o projeto, mas possibilita perceber o que estou fazendo com o css.

A partir do id = “app”, estilizo no arquivo a seguir.

Os elementos #app aside e #app main só foram inseridos para demonstrar os limites de cada elemento.

Na linha 2, o max-width determina a largura máxima da div que tem o id app para o caso do monitor do usuário for muito grande.

Na linha 3, o margin mantem centralizado a div que tem o id app.

Na linha 4, o padding 60px e 30px determinam o espaço em cima e embaixo, depois o da direita e da esquerda.

As próximas linhas são as mais fortes nessa estilização, na minha opnião. Na linha 5, o display permite que os elementos dentro da div que tem o id app sejam livres, e preencham os espaços.

E a linha 6, com o flex-direction diz que o efeito de preechimento da linha 5 será linha a linha.

Na linha 7, o align-items diz que os elementos internos, aside e main, se manterão centralizados e um ao lado do outro.

O resultado foi o seguinte:

O objetivo desse artigo foi demonstrar um exemplo prático de estilização de uma aplicação real, no início do desenvolvimento.

Para esse cenário de estilização com css no js o mais indicado é o uso de styled components. Em um segundo momento próximo, será o tema de estudo.

Esse artigo ficou menor que os demais, mas a intenção é tratar situações mais específicas nesse tipo de tema técnico e prático. Tomara que tenha gostado, aplauda o artigo! Até o próximo artigo e ótimos códigos.

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Love podcasts or audiobooks? Learn on the go with our new app.