Grid css O GUIA RESUMIDO

Ysrael Sacrati — Wed, 18 May 2022 19:30:49 +0000

Colocando o grid no contêiner

display :grid

O display grid também gera as tags :

Grid-template-columns : propriedades da exibição do conteúdo

Gap : espaçamento entre os elementos

grid-template-columns : 1fr 1fr
// Criou 2 colunas , o fr eh uma propriedade própria do grid , usada
para definir tamanhos de colunas

Gap: 20px;
// Separa as colunas de forma igualitária

Align content⇒ espaçamento na vertical

Justify contente ⇒espaçamento na horizontal

Align-items ⇒espaçamento vertical dos itens

Justify-items ⇒espaçamento horizontal dos itens

Place-items ⇒os 2 acima

Align-self ⇒ espaçamento vertical do item selecionado

Justify-self ⇒ ... Do item selecionado

Place-self ⇒os 2 acima

Grid column

grid-column: 1 / 3// O item ocupará a coluna 1 e 2 (Sim, isso mesmo, 1 e 2, pois os valores 1 / 3 são referentes as linhas da coluna. Isso significa que começa na linha 1 (início do grid) e vai até a linha 3, que é o começo da terceira coluna).

grid-column: 1// O item ocupará a coluna 1.

Define quais colunas serão ocupadas pelo grid item. É possível definir uma linha de

início e final, assim o item irá ocupar múltiplas colunas.

Clean code resumo

Ysrael Sacrati — Wed, 18 May 2022 19:22:38 +0000

Escrever um código limpo, compreensível e sustentável é uma habilidade crucial para todo desenvolvedor dominar.

Um código limpo , economiza tempo , dinheiro e armazenamento , e também mostra que sua equipe controlando o código não o código controlando sua equipe.

Por isso que nos temos que manter a habilidade de limpa sempre em pratica.

Resumão dos preceitos

Como nomear variaveis e etc?

os nomes são muito mais fáceis de lembrar. E, mais importante, eles podem fornecer mais informações sobre a variável, para que outra pessoa possa entender seu significado. Por isso é importante definir bons nomes.

Criando nomes

Não use comentários para explicar por que uma variável é usada. Se um nome requer um comentário, você deve reservar um tempo para renomear essa variável em vez de escrever um comentário.

exemplo ruim :
var d; // dias do mes

exemplo bom :
var diasDoMes;

Usar nomes pesquisáveis

Evite usar números mágicos em seu código. Opte por constantes nomeadas e pesquisáveis. Não use nomes de uma única letra para constantes, pois elas podem aparecer em muitos lugares e, portanto, não são facilmente pesquisáveis.

Escrevendo boas funções
Mantenha-os pequenos

As funções devem ser pequenas, muito pequenas. Eles raramente devem ter 20 linhas. Quanto mais longa uma função fica, é mais provável que ela faça várias coisas e tenha efeitos colaterais.

Certifique-se de que eles apenas façam uma coisa

Suas funções devem fazer apenas uma coisa. Se você seguir essa regra, é garantido que eles serão pequenos. A única coisa que essa função faz deve ser declarada em seu nome.

Menos argumentos

As funções devem ter dois ou menos argumentos, quanto menos, melhor. Evite três ou mais argumentos sempre que possível.

Bônus

.Não deixe código nos comentários

valeu pela atenção espero que esse artigo tenha ajudado

quem quiser pode acessar meu linkedin.

https://www.linkedin.com/in/ysrael-sacrati/

valew!!

😌

DEV Community: Ysrael Sacrati

Grid css O GUIA RESUMIDO

Clean code resumo