[Dúvida] Tem problema em estilizar elementos sem criar classe? | HTML e CSS: Classes, posicionamento e Flexbox

Eu criei a classe destaque para estilizar os textos em destaque, como na aula, porém eu estilizei a palavra Front-end e não estilizei o span que a envolve. Os códigos em print logo abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>

    </header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong class="destaque">com um <span>Front-end</span> de qualidade!</strong></h1>
        <p>Olá! Sou Lucas Pereira, desenvolvedor Front-end com especialidade em <strong class="destaque">HTML, CSS e JavaScript</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <a href="https://www.linkedin.com/in/lucas-pereira-de-lima-programador/">LinkedIn</a>  
        <a href="https://github.com/LucasDevRJ">GitHub</a>  
        <img src="foto.png" alt="Foto minha sorrindo de óculos e uma camisa azul">    
    </main>

    <footer>

    </footer>
</body>
</html>

body {
    background-color: #000000;
    color: #F6F6F6;
}

.destaque {
    color: #22D4FD;
}

span {
    color: #22D4FD;
    border: 1px solid #22D4FD;
    border-radius: 5px;
    padding: 10px;
}

Tem algum problema em eu não criar uma classe para o span? Tendo em vista que possivelmente não criarei outro. E sobre a classe destaque, esta tudo certo né?

Oi Lucas, tudo bem?

Muito obrigada por compartilhar sua dúvida com a gente. Vou te ajudar a entender melhor esse assunto.

Primeiramente, em relação à classe "destaque", você está no caminho certo! A utilização da classe para estilizar os textos em destaque é uma prática comum e recomendada. No seu código, você aplicou corretamente a classe "destaque" nos elementos que deseja estilizar, como nos trechos com um Front-end de qualidade! e HTML, CSS e JavaScript. A cor definida no estilo da classe "destaque" (#22D4FD) está sendo aplicada corretamente aos elementos com essa classe.

Agora, em relação ao elemento , é importante entender que o  é uma tag genérica utilizada para estilizar trechos de texto ou agrupar elementos em um bloco. No seu código, você aplicou algumas propriedades de estilização diretamente ao  como cor (#22D4FD), borda (1px solid #22D4FD), borda arredondada (border-radius: 5px) e espaçamento interno (padding: 10px). Essas propriedades estão sendo aplicadas corretamente ao , mesmo sem criar uma classe específica para ele. Portanto, não há problema em estilizar o  sem criar uma classe, especialmente se você não pretende reutilizar essa estilização em outros elementos.

Entretanto, é importante salientar que a criação de classes é uma prática recomendada para promover a reutilização de estilos em diferentes elementos. Se, no futuro, você identificar a necessidade de estilizar outros elementos de forma semelhante ao , seria mais conveniente criar uma classe específica para essa estilização e aplicá-la aos elementos desejados. Dessa forma, você evita duplicação de código e facilita a manutenção do seu projeto.

Para exemplificar, imagine que você queira estilizar outros elementos com as mesmas propriedades do . Nesse caso, você poderia criar uma classe chamada "destaque-span" (ou qualquer outro nome que faça sentido para o seu projeto) e aplicá-la tanto ao  quanto a outros elementos que desejarem ter essa mesma estilização. Veja o código a seguir:

.destaque-span {
    color: #22D4FD;
    border: 1px solid #22D4FD;
    border-radius: 5px;
    padding: 10px;
}

Dessa forma, você poderia adicionar a classe "destaque-span" ao  e a outros elementos desejados, mantendo uma consistência visual em seu projeto. No entanto, reforço que isso não é obrigatório no seu caso específico, já que você mencionou que possivelmente não criará outros elementos com essa mesma estilização.

Em resumo, não há problema em estilizar o  sem criar uma classe específica, desde que você esteja alcançando o resultado visual desejado. Porém, é sempre recomendado o uso de classes para promover a reutilização de estilos e facilitar a manutenção do código no longo prazo.

Espero que esta explicação tenha te ajudado.

Um abraço e bons estudos.