Estilos permitem definir a aparência do seu site e criar uma marca coesa e estética. Embora várias abordagens usem CSS (Cascading Style Sheets) para criar estilos em páginas da web, as soluções baseadas em JavaScript são mais flexíveis e oferecem a você mais controle do que o CSS padrão.

Um método popular é usar o JavaScript Style Sheets (JSS), que permite a você escrever estilos CSS em JavaScript. O JSS tem várias vantagens, inclusive o uso de variáveis, expressões JavaScript e funções para criar estilos e temas dinâmicos.

Este artigo explora como o JSS funciona, seus benefícios, e como você pode usá-lo em seus aplicativos JavaScript. Também aborda criação de estilos dinâmicos, temas e otimização de desempenho. Você pode usar o JSS com muitos tipos de aplicativos, mas neste artigo vamos nos concentrar no JSS para React.

O que é JSS?

Com o JSS, você pode escrever estilos CSS como objetos JavaScript e usar esses objetos como nomes de classe em elementos ou componentes. O JSS é independente de framework, portanto você pode usá-lo no JavaScript básico ou com frameworks como React e Angular.

O JSS tem várias vantagens sobre a criação de estilos CSS tradicional:

  • Estilo dinâmico: Com o JSS, você pode manipular estilos com base nas interações do usuário ou valores como props ou contexto. As funções JavaScript ajudam você a gerar estilos dinamicamente no navegador, dependendo do estado do aplicativo, de dados externos ou das APIs do navegador.
  • Recursos aprimorados de criação de temas: Você pode criar estilos específicos para um determinado tema usando o JSS. Por exemplo, você pode criar estilos para um tema claro e escuro e, em seguida, aplicar esses estilos específicos de tema para todo o aplicativo de acordo com as preferências do usuário. Se você estiver usando o React, o pacote React-JSS oferece suporte à propagação de temas com base em contexto. Você pode definir e gerenciar o tema em um único local antes de passar as informações do tema para a árvore de componentes usando um provedor de temas.
  • Manutenção aprimorada: Ao definir estilos em objetos JavaScript, você pode agrupar estilos relacionados em um único local e importá-los para o aplicativo quando necessário. Essa abordagem reduz a duplicação de código e melhora a organização do código, facilitando a manutenção dos estilos ao longo do tempo.
  • CSS real: O JSS gera CSS real em vez de estilos em linha que podem ser confusos e difíceis de gerenciar. O JSS usa nomes de classe exclusivos por padrão, o que ajuda a evitar colisões de nomes causadas pela natureza global do CSS.

Como escrever estilos com o JSS

Este artigo é baseado em um projeto React. Ele usa o pacote react-jss, que integra o JSS ao React usando a API Hooks. O react-jss vem com os plugins padrão e permite que você use o JSS com o mínimo de configuração.

Sintaxe básica e uso do JSS no React

Para usar o JSS no React, primeiro você deve instalar o pacote react-jss usando um gerenciador de pacotes, como o npm ou o Yarn.

A sintaxe para escrever estilos no JSS envolve a definição de regras CSS para elementos específicos em um objeto JavaScript. Por exemplo, o código a seguir define os estilos para um botão em um aplicativo React.


const styles = {
      button: {
            padding: "10px 20px",
            background: "#f7df1e",
            textAlign: "center",
            border:"none"
      }
};

Observação: As propriedades CSS estão em CamelCase.

Para aplicar esses estilos a um elemento HTML:

  1. Gere as classes passando os estilos para a função createUseStyles() method from react-jss:
import { createUseStyles } from "react-jss";
const styles = {
       button: {
             padding: "10px 20px",
             background: "#f7df1e",
             textAlign: "center",
             border:"none"
       }
};
const useStyles = createUseStyles(styles);
  1. Aplique o CSS ao elemento do botão usando o nome da classe gerada:
const App = () = > {
      const classes = useStyles();
      return (
            < button className={classes.button} > </button >
      );
};

Esse código cria um componente React e aplica os estilos no objeto styles.

Como lidar com pseudoclasses, media queries e keyframes

O JSS é compatível com todos os recursos CSS existentes, inclusive pseudoclasses, media queries e keyframes. Use a mesma sintaxe das regras de estilo CSS regulares para definir estilos para esses recursos.

Pseudoclasses

Por exemplo, suponha que você queira adicionar uma pseudoclasse hover ao botão para alterar a cor do plano de fundo quando o usuário passar o mouse sobre ele. O código a seguir implementa essa pseudoclasse para que o fundo do botão fique verde-claro quando o mouse passar sobre ele:

const styles = {
      button: {
            padding: "10px 20px",
            background: "#f7df1e",
            textAlign: "center",
            border:"none",
            '&:hover': {
                  backgroundColor: 'lightgreen',
            }
     }
};

Keyframes

Da mesma forma, você pode aplicar uma animação keyframe a um componente usando a regra @keyframes. Por exemplo, o objeto de estilo abaixo é para um componente giratório.

const styles = {
       '@keyframes spin': {
             '0%': {
                   transform: 'rotate(0deg)',
             },
             '100%': {
                   transform: 'rotate(360deg)',
             },
       },
       spinner: {
              width: "100px",
              height: "100px",
              backgroundColor: "lightgreen",
              animation: '$spin 1s linear infinite',
       },
}

Na função styles, você definiu uma animação keyframe denominada spin usando a regra @keyframes. Em seguida, você cria uma classe chamada spinner que aplica a animação usando a sintaxe $ para fazer referência à animação keyframe.

Media queries

As media queries também usam a sintaxe CSS usual no JSS. Por exemplo, para alterar o tamanho da fonte de um botão em um tamanho de tela específico, use os seguintes estilos:

const styles = {
      button: {
            fontSize: "12px",
            '@media (max-width: 768px)': {
                  fontSize: '34px',
            },
      }
};

Como você acabou de ver, escrever estilos em JSS não é muito diferente de escrever CSS simples. Entretanto, a vantagem é que você pode aproveitar o poder do JavaScript para tornar seus estilos dinâmicos.

Estilo dinâmico com JSS

Estilo dinâmico significa criar estilos que mudam em resposta a condições específicas. No React, os estilos podem mudar dependendo de valores como estado, props e contexto do componente.

Como criar estilos dinâmicos com o JSS

No JSS, você pode aplicar condicionalmente estilos aos seus elementos com expressões JavaScript para criar regras de estilo dinâmico.

Digamos que você tenha um botão que recebe uma propriedade chamada bgColor. Seu valor é a cor de fundo do botão. Para criar uma regra de estilo que altere a cor de fundo do botão com base na prop, passe as props para o método useStyles.

import { createUseStyles } from "react-jss"

const styles = {
      button: {
            padding: "10px 20px",
            background: props = >props.bgColor,
            textAlign: "center",
            border:"none"
      }
};
const Button = ({...props}) => {
  
      const useStyles = createUseStyles(styles);
      const classes = useStyles({...props});
      return (
            <button className={classes.button}>Button </button>
      );
};

Em seguida, você pode fazer referência às props no objeto styles. O exemplo acima faz referência a props.bgColor.

Você pode passar a cor de fundo que deseja quando o componente renderizar. O componente abaixo renderiza dois componentes Button com as cores de fundo lightgreen e yellow.

export default function App() {
  return (
    <div >
      <Button bgColor="lightgreen" />
      <div style={{ marginTop: "10px" }}></div>
      <Button bgColor="yellow" />
    </div>
  );
}
Two buttons dynamically styled with JSS
Dois botões com estilos criados dinamicamente com JSS.

Sempre que renderizar o componente Button, você poderá definir o estilo do plano de fundo como quiser.

Você também pode alterar os estilos com base no estado de um componente. Suponha que você tenha um menu de navegação com vários itens de link. Para destacar o link da página atual, defina um valor de estado chamado isActive que controla se um item de link do menu está ativo.

Em seguida, você pode usar um operador ternário JavaScript para verificar o valor de isActive, definindo a cor do link como azul se o estado for true e vermelho se for false.

const styles = {
      a: {
             color: ({ isActive }) => isActive ? 'blue' : 'red',
             padding: '10px',
      },
};

Agora os links ativos ficam azuis e os inativos ficam vermelhos.

Da mesma forma, você pode criar um estilo dinâmico com base no contexto. Você pode atribuir um estilo a um elemento, como UserContext, com base no valor de um contexto que armazena o status on-line do usuário.

const { online } = useContext(UserContext);
const styles = {
      status: {
            background: online ? 'lightgreen' : '',
            width: '20px',
            height: '20px',
            borderRadius: "50%",
            display: online ? 'flex' : 'hidden'
      },
};

Neste exemplo, o elemento tem um fundo verde se o usuário estiver on-line. Você define a propriedade display como flex se o usuário estiver on-line e hidden se o usuário estiver off-line.

Casos de uso de estilo dinâmico

O estilo dinâmico é um recurso avançado do JSS que tem muitos usos:

  • Temas: Você pode definir estilos com base em um objeto de tema, como um tema claro e um tema escuro, e passá-lo para os componentes como um valor de prop ou de contexto.
  • Renderização condicional: O JSS permite que você defina estilos com base em valores específicos. Você pode criar estilos que se aplicam somente sob determinadas condições, como quando um botão está desativado, um campo de texto está em estado de erro, um menu de navegação lateral está aberto ou quando um usuário está on-line.
  • Design responsivo: Você pode usar o estilo dinâmico no JSS para alterar o estilo de um elemento com base na largura da janela de visualização. Por exemplo, você pode definir um conjunto de estilos para um breakpoint específico usando media queries e aplicá-los condicionalmente com base no tamanho da tela.

Como usar temas com o JSS

Use temas para fornecer uma interface de usuário consistente em todo o seu aplicativo. É fácil criar temas no JSS — basta definir um objeto de tema com valores de estilo globais, como cores, tipografia e espaçamento. Por exemplo:

const theme = {
      colors: {
            primary: '#007bff',
            secondary: '#6c757d',
            light: '#f8f9fa',
            dark: '#343a40',
       },
       typography: {
             fontFamily: 'Helvetica, Arial, sans-serif',
             fontSize: '16px',
             fontWeight: 'normal',
       },
       spacing: {
             small: '16px',
             medium: '24px',
             large: '32px',
       },
};

Para aplicar temas aos seus componentes, use provedores de contexto. A biblioteca JSS fornece um componente ThemeProvider que você pode usar para encapsular componentes que precisam acessar o tema.

O exemplo a seguir envolve o componente Button com o componente ThemeProvider e passa o objeto theme como uma propriedade.

import { ThemeProvider } from "react-jss";
const App = () => (
      <ThemeProvider theme={theme}>
            <Button />
      </ThemeProvider>
)

Você pode acessar o tema no componente Button usando um hook useTheme() e passá-lo para o objeto useStyles. O exemplo abaixo usa os estilos definidos no objeto de tema para criar um botão primário.

import { useTheme } from “react-jss”

const useStyles = createUseStyles({
  primaryButton: {
    background: ({ theme }) => theme.colors.primary,
    font: ({ theme }) => theme.typography.fontFamily,
    fontSize: ({ theme }) => theme.typography.fontSize,
    padding: ({ theme }) => theme.spacing.medium
  }
});

const Button = () => {
      const theme = useTheme()
      const classes = useStyles({theme})
      return (
            <div>
              <button className={classes.primaryButton}> Primary Button </button>
            </div>

      )
}

O botão deve ficar parecido com a imagem abaixo, com texto preto em um botão retangular azul.

A primary button style based on the theme.
Um estilo de botão primário baseado no tema.

Se você alterasse qualquer um dos valores no objeto de tema, isso acionaria automaticamente novos estilos a serem aplicados a todos os componentes agrupados com o componente ThemeProvider. Se você alterar o valor da cor primária para lightgreen, a cor do botão também mudará para verde-claro, como na imagem abaixo.

A primary button color adapts to the theme.
A cor primária de um botão se adapta ao tema.

Aqui estão algumas diretrizes a serem seguidas ao criar temas:

  • Defina o objeto de tema em um arquivo separado para manter o código organizado e de fácil manutenção.
  • Use nomes descritivos para os valores de estilo para tornar o objeto de tema fácil de ler e atualizar.
  • Use variáveis CSS para definir valores que você usa com frequência em seu CSS.
  • Crie valores padrão para todas as propriedades de estilo para manter um design consistente em todo o aplicativo.
  • Teste minuciosamente seus temas para garantir que eles funcionem como planejado em todos os dispositivos e navegadores.

Seguindo essas práticas recomendadas, você criará um tema que é simples de usar e fácil de atualizar à medida que o aplicativo cresce.

Desempenho e otimização

O JSS é uma solução de estilo de alto desempenho. Com o JSS, somente os estilos usados atualmente na tela são adicionados ao DOM (Document Object Model), o que reduz o tamanho do DOM e acelera a renderização. O JSS também armazena em cache os estilos renderizados, o que significa que o JSS compila CSS apenas uma vez, melhorando ainda mais o desempenho.

Você pode tirar proveito de otimizações adicionais de desempenho usando o pacote react-jss em vez do pacote principal do JSS. Por exemplo, o react-jss remove as folhas de estilo quando o componente é desmontado. Também lida com a extração crítica de CSS e extrai apenas estilos de componentes renderizados. É assim que o pacote react-jss reduz o tamanho do pacote de CSS e melhora o tempo de carregamento.

Para reduzir ainda mais o tamanho do pacote de CSS, use divisão de código para carregar somente o CSS de que uma página ou componente específico precisa. Uma biblioteca como loadable-components pode simplificar a divisão de código.

O JSS também permite que você gere CSS no lado do servidor. Você pode agregar e encadear o CSS anexado usando a classe de registro StyleSheet do JSS e, em seguida, enviar os componentes renderizados e a string CSS para o cliente. Após iniciar o aplicativo, o CSS estático não é mais necessário e você pode removê-lo, reduzindo o tamanho do pacote.

Resumo

Você aprendeu os conceitos básicos da sintaxe do JSS, como criar e aplicar objetos de estilo a componentes, e como criar estilos dinâmicos. Agora você também sabe como usar o componente ThemeProvider para aplicar temas e melhorar o desempenho no JSS. E pode usar o JSS para criar estilos reutilizáveis, dinâmicos e de fácil manutenção, que se adaptam a várias condições.