[{"data":1,"prerenderedAt":14},["ShallowReactive",2],{"post-otimize-seu-css-com-o-seletor-where":3},{"id":4,"imagem":5,"titulo":6,"slug":7,"tags":8,"date":11,"resumo":12,"artigo":13},4,"\u002Fimagens\u002Fblog\u002Ftiago-bernardes-blog-css-seletor-where.webp","Um recurso incrível, otimize seu CSS com o seletor :where()","otimize-seu-css-com-o-seletor-where",[9,10],"css","frontend","13\u002F11\u002F2025","Se você já se perguntou o que diferencia um desenvolvedor júnior de CSS de um sênior, a resposta está[...]","\u003Cp>Se você já se perguntou o que diferencia um desenvolvedor júnior de CSS de um sênior, a resposta está em escrever um código mais limpo, eficiente e fácil de manter. Um exemplo claro é como utilizamos seletores.\u003C\u002Fp>\n \n \u003Ch2>O problema\u003C\u002Fh2>\n \u003Cp>Imagine que você precise estilizar vários elementos \u003Ccode>h1\u003C\u002Fcode>, \u003Ccode>h2\u003C\u002Fcode>, \u003Ccode>h3\u003C\u002Fcode> e \u003Ccode>h4\u003C\u002Fcode> dentro da tag \u003Ccode>main\u003C\u002Fcode>.\u003C\u002Fp>\n \u003Cpre>\u003Ccode>main h1, main h2, main h3, main h4 {\n color: red;\n}\u003C\u002Fcode>\u003C\u002Fpre>\n \u003Cp>Embora isso funcione, é verboso e pode dificultar a manutenção, especialmente em projetos maiores.\u003C\u002Fp>\n \n \u003Ch2>A solução\u003C\u002Fh2>\n \u003Cp>Ao invés disso, você pode usar o seletor \u003Ccode>:where()\u003C\u002Fcode>, que torna o código mais claro e organizado:\u003C\u002Fp>\n \u003Cpre>\u003Ccode>main :where(h1, h2, h3, h4) {\n color: red;\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\n \u003Ch2>Por que usar :where()?\u003C\u002Fh2>\n \u003Cul>\n \u003Cli>\u003Cstrong>Simplicidade:\u003C\u002Fstrong> Elimina redundâncias, reduzindo a chance de erros.\u003C\u002Fli>\n \u003Cli>\u003Cstrong>Legibilidade:\u003C\u002Fstrong> Facilita o entendimento do código para você e outros desenvolvedores.\u003C\u002Fli>\n \u003Cli>\u003Cstrong>Manutenção:\u003C\u002Fstrong> Permite adicionar ou alterar seletores facilmente sem precisar repetir o prefixo.\u003C\u002Fli>\n \u003C\u002Ful>\n\n \u003Ch2>Exemplo Prático\u003C\u002Fh2>\n \u003Cp>Aqui está um exemplo completo para você experimentar:\u003C\u002Fp>\n \u003Cpre>\u003Ccode><!DOCTYPE html>\n<html lang=\"pt-br\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Exemplo com :where()<\u002Ftitle>\n <style>\n main :where(h1, h2, h3, h4) {\n color: red;\n font-family: Arial, sans-serif;\n text-align: center;\n }\n <\u002Fstyle>\n<\u002Fhead>\n<body>\n <main>\n <h1>Título Principal<\u002Fh1>\n <h2>Subtítulo<\u002Fh2>\n <h3>Seção<\u002Fh3>\n <h4>Subseção<\u002Fh4>\n <\u002Fmain>\n<\u002Fbody>\n<\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\n\n \u003Ch2>Conclusão\u003C\u002Fh2>\n \u003Cp>A adoção de boas práticas como essa não apenas melhora seu código, mas também aumenta sua produtividade e reputação como desenvolvedor.\u003C\u002Fp>",1780414804171]