Variáveis CSS

Isaac Jordão — Wed, 10 Aug 2022 23:02:35 +0000

Quando estamos desenvolvendo e estilizando as páginas, nós conseguimos perceber algumas repetições no arquivo do CSS, e quanto mais o projeto cresce, mais pode ser difícil a manutenção.

E por ser um problema recorrente, os criadores de pré-processadores CSS como o SASS adicionaram variáveis, mas o uso do SASS, por exemplo, adiciona mais um passo de processamento. Por isso, foram criadas as variáveis CSS e para usá-las é bastante simples.

Desenvolvi um pequeno projeto apenas para demonstrar como declarar as variáveis e utilizá-las.

Estrutura do arquivo HTML

<body>

  <div class="container">
    <main class="children">
      <h2>Variáveis CSS</h2>
      <blockquote cite="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties">Variáveis CSS são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo do documento. São configuradas usando esta notação (ex: --cor-principal: black; ) e são acessadas usando a funcão var() (ex: color: var(--cor-principal); )</blockquote>
    </main>
  </div>

</body>

Como declarar as variáveis do arquivo CSS

As variáveis são declaradas na pseudo-classe :root, como no exemplo abaixo.

:root {
  --background: #700353;
  --background-alternative: #ffbfb7;
  --text-color: #320d6d;

  --h2-font-size: 3.8rem;
  --blockquote-font-size: 1.6rem;

  --border-radius: 10px;

  --padding: 4rem;
}

E como eu posso usar as variáveis declaradas?

Para usar as variáveis é bastante simples, basta colocar var(nome-da-variável) no valor da propriedade.

.children {
  width: 50rem;
  height: 50rem;
  background: var(--background-alternative);

  text-align: center;
  padding: var(--padding);

  color: var(--text-color);

  border-radius: var(--border-radius);
}

.children h2 {
  font-size: var(--h2-font-size);
}

Preview do projeto

O link com o código completo no github é esse aqui.

Minhas redes:
Linkedin
Twitter

Fonte:
MDN

Espero ter ajudado a tornar seu desenvolvimento mais fácil e rápido.

Facade Pattern - React

Isaac Jordão — Thu, 28 Jul 2022 22:46:33 +0000

Existem diversos padrões de projetos que ajudam a manter o código limpo e mais legível, e neste post irei mostrar como usar o Facade Pattern para criar uma função que busca os personagens fornecidos pela SWApi.

O Facade Pattern é um dos padrões mais famosos do GoF (Gang of Four), e é do tipo estrutural. A maior vantagem dele é deixar a manutenção e uma possível refatoração muito mais simples, tanto do Front End, quanto do Back End.

No exemplo eu utilizei o axios, mas você também pode utilizar o fetch.

Configuração padrão do axios, adicionando a url da SWApi.

import axios from "axios";

export default axios.create({
  baseURL: 'https://swapi.dev/api/',
  headers: {
    'Content-Type': 'application/json'
  }
})

Função getFetch

import axios from "../api/axios";

export default async function getFetch (url) {
    const response = await axios.get(url)
    return response.data
}

Consumo da SWApi

import getFetch from "./utils/getFetch";

function App() {
  const [characters, setCharacters] = useState([]);
  const [loading, setLoading] = useState(false);

  async function getCharacters() {
    try {
      setLoading(true);
      const { results } = await getFetch("people/");
      setCharacters(results);
    } catch (error) {
      throw new Error(error);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    getCharacters();
  }, []);

  return (
    <div className="App">
      <ul>
        {loading && <p>Carregando...</p>}
        {characters &&
          characters.map((character) => (
            <li key={character.name}>{character.name}</li>
          ))}
      </ul>
    </div>
  );
}

Resultado final no navegador

Link do projeto no Github