Neste aula o instrutor cria um ternário no SCSS do button para verificar se state.id está selecionado ou não, para assim aplicar uma estilização diferente, até ai entendi.
Porém seria uma boa prática separa a lógica do CSS e estilizar o button pelo focus? pois o button que tiver o focus terá o id selecionado automaticamente.
hoje, com a Alura e o Google Gemini
Oi Bruno, tudo bem?
Desculpe a demora em retornar.
Sim, é uma boa prática separar a lógica do CSS e utilizar as pseudo-classes do CSS para estilizar elementos com base em seu estado, como o :focus, que é aplicado a um elemento quando ele recebe foco.
Se o seu objetivo é alterar o estilo do botão quando ele estiver em foco, você pode simplesmente aplicar as propriedades de estilo desejadas ao seletor button:focus, sem a necessidade de verificar o estado do state.id com um ternário no SCSS.
Algo como:
button {
/* Estilos padrão do botão */
background-color: #ccc;
border: none;
color: #fff;
padding: 10px;
/* Estilos do botão quando em foco */
&:focus {
outline: none; /* Remove o contorno padrão do foco */
box-shadow: 0 0 5px #000; /* Adiciona uma sombra ao redor do botão */
}
}Dessa forma, o botão que estiver em foco terá o estilo especificado dentro do seletor button:focus. Note que é importante remover o contorno padrão do foco (através da propriedade outline: none) para evitar problemas de acessibilidade.
Um abraço e bons estudos.