Seção de recursos de quatro cartões

Community feedback

• 

  Camilo Micheletto•50

  @AllyherePosted 7 months ago

  Parabéns pelo trampo! Achei legal como tu resolveu com a div no centro! Tenho algumas dicas de CSS, espero que ajude de alguma forma.

  1 - Não precisamos mais usar @charset

  Segundo a MDN: "The CSS syntax module deprecates this rule, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked, but it is fully supported in all browsers."

  2 - Ao invés de aplicar classes pra cada texto e fonte, identifique quais combinações de texto e fonte existem e crie classes utilitárias pra elas

  Se tu pensar bem, tem apenas 3 combinações de fonte nesse projeto - o heading, os títulos dos cards e os textos descritivos:

  .heading {
    font-size: var(--font-size);
    font-weight: 100;
  }
  
  .heading strong {
      letter-spacing: var(--letter-spacing);
   }
  
  .title {
    font-size: 1.25rem;
  }
  
  .text {
    font-size: 15px;
    color: var(--accent);
  }
  
  

  3 - Sempre que puder economizar classes, economize! Muita especificidade pode ser ruim.

  Exemplo:

  
  /* Nesse caso isso */
  .cards .card-supervisor, .card-team, .card-karma, .card-cal {
      display: flex;
      flex-direction: column;
      background-color: var(--Very-Light-Gray);
      width: 350px;
      height: 250px;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 30px;
      box-shadow: 1px 1px 25px var(--Grayish-Blue);
  }
  
  /* poderia ser isso */
  
  .cards > * {
     /* ... */
  }
  
  /* ou até isso */
  
  [class^=card-] {
     /* ... */
  }
  

  4 - Sempre importe as fontes no HTML Se você importar a fonte no CSS, o navegador vai:

  1. Baixar o HTML
  2. Ler o HTML até encontrar o CSS
  3. Baixar o CSS
  4. Ler o CSS até encontrar a fonte
  5. Baixar a fonte

  Se você importar a fonte no HTML, o navegador vai:

  1. Baixar o HTML
  2. Ler o HTML até encontrar a fonte
  3. Baixar a fonte

  Bons estudos!

  Marked as helpful

  1