🤖 Customização, Open Source e pequenos hacks que ajudam projetos a evoluírem

Há cerca de 3 anos, publiquei aqui no TabNews um post mostrando como eu personalizei visualmente a plataforma usando apenas CSS sobreposto via Stylus:

👉 https://www.tabnews.com.br/rocha/estilizacao-personalizada-do-tabnews

Na época, a ideia não era “quebrar” nada, era explorar até onde dava para ir com pequenos hacks visuais. O post teve uma repercussão bem legal: o próprio @felipedeschamps comentou dizendo que gosta desse tipo de hack, e o @rafael, um dos contribuidores do projeto, sugeriu algo importante: padronizar melhor os identificadores dos elementos para facilitar customizações.

Esse detalhe ficou comigo.

Quando hacks viram feedback de produto

O TabNews usa muitas classes geradas dinamicamente, o que torna qualquer customização extremamente frágil. Ainda assim, com o Stylus, eu conseguia coisas como:

• Header flutuante
• Ajustes de layout
• Destaque visual para usuários específicos
• Pequenos refinamentos de UX

Exemplo do CSS antigo (baseado em classes geradas):

.dWxAqQ { /* Header */ }
.czRdDB[href="/rocha"] { /* Nome do usuário */ }

Funcional? Sim Não mais.
Robusto? Nem um pouco.

O projeto evoluiu — e isso muda tudo

Com o tempo, os devs do TabNews evoluíram a base e padronizaram melhor alguns elementos, permitindo algo muito mais saudável:

#header { /* Header */ }
body main { /* Conteúdo */ }
address a[href="/rocha"] { /* Link para perfil do usuário */ }

Aqui está um exemplo de como ficou o visual aplicado:

Isso já é um salto enorme em termos de estabilidade, acessibilidade e extensibilidade.

Por outro lado, ainda existem áreas — como o modal de perfil — que não possuem um identificador consistente, o que torna a personalização praticamente inviável sem hacks frágeis.

E é aqui que entra a parte mais importante desse post.

Open Source não é só usar — é devolver

Ao invés de apenas adaptar meu CSS de novo, decidi fazer algo diferente dessa vez:
contribuir diretamente com o projeto para tornar esse tipo de personalização mais fácil, limpa e previsível.

A ideia que estou propondo é simples e já validada em outros projetos modernos de UI.

Proposta: data-slot como identificador semântico de componentes

Inspirado no padrão usado pelo HeroUI, a proposta é que componentes-chave do TabNews tenham atributos como:

<header data-slot="header"></header>

<div data-slot="profile-modal"></div>

<article data-slot="post-item"></article>

<address data-slot="author"></address>

Com isso, qualquer pessoa poderia aplicar customizações sem depender de classes internas ou estrutura frágil, por exemplo:

[data-slot="profile-modal"] {
  margin-top: 20px;
}

[data-slot="author"][href="/rocha"] {
  background: #0b471b;
}

Vantagens claras:

• Não quebra o CSS interno
• Não interfere na semântica
• Não expõe detalhes de implementação
• Facilita temas, extensões e acessibilidade
• Ajuda designers e power users

Por que isso importa?

Porque customização é uma forma legítima de engajamento.
Ela transforma usuários em exploradores, exploradores em contribuidores — e contribuidores em mantenedores.

O TabNews sempre teve esse espírito aberto a experimentação. Esse tipo de ajuste não muda a plataforma para quem não quer, mas abre portas para quem quer ir além.

Próximos passos

Vou:

• Propor esse padrão no repositório
• Implementar identificadores progressivamente
• Manter compatibilidade total com o layout atual
• Documentar os data-slots disponíveis

Tudo isso sem comprometer a simplicidade do projeto.

Open source cresce assim, alguém testa, alguém sugere, alguém implementa — e todo mundo ganha.

Em breve trago mais novidades!