Projeto CSS Zen Garden

• CSS Zen Garden é um projeto que demonstra a beleza do design baseado em CSS
• O HTML permanece o mesmo, e é possível experimentar diversos designs alterando apenas o arquivo CSS externo
• Os participantes podem mostrar o poder do web design por meio de CSS, inspirar outras pessoas e usar isso como material de aprendizado
• Usa principalmente CSS 1 e 2, e CSS 3 e 4 devem ser usados de forma limitada
• Os designs enviados devem apresentar resultados consistentes em vários navegadores e funcionar, no mínimo, no IE9+ e em navegadores modernos

---

A importância do CSS Zen Garden

• CSS Zen Garden é um projeto criado para mostrar o poder do CSS e inspirar designers e desenvolvedores
• O HTML permanece o mesmo, e é possível experimentar diversos designs alterando apenas o arquivo CSS externo
• Este projeto mostra as possibilidades do CSS e destaca a beleza do web design

Como participar

• É necessário ter um design visual forte e domínio de CSS, mas iniciantes também podem começar com os arquivos de exemplo
• Você pode modificar livremente a folha de estilos, mas não pode alterar o HTML
• O trabalho finalizado deve ser enviado para um servidor web e o link precisa ser submetido

Benefícios de participar

• Pode aumentar sua visibilidade, servir de inspiração e ser usado como material que demonstra as incríveis possibilidades do CSS
• É um site que pode inspirar web designers e desenvolvedores e também ser usado como material de aprendizado

Requisitos

• Use principalmente CSS 1 e 2, e CSS 3 e 4 devem ser usados de forma limitada
• Deve apresentar resultados consistentes em vários navegadores e funcionar, no mínimo, no IE9+ e em navegadores modernos
• É necessário enviar um trabalho original e respeitar os direitos autorais

Direitos autorais e licença

• Os gráficos enviados mantêm seus direitos autorais, e o CSS deve ser disponibilizado sob uma licença Creative Commons
• O CSS deve ser compartilhado para que outras pessoas possam aprender

[GN⁺]

Comentários do Hacker News

• Antes do surgimento do CSS, desenvolvedores web abusavam de elementos de tabela para criar grades e implementavam layouts recortando imagens e posicionando-as em tabelas

  • Havia resistência ao CSS, e muitos desenvolvedores se recusavam a aprendê-lo
  • Existia a ideia errada de que CSS só permitia designs "sem graça e quadradões"
  • Dave Shea desfez esses equívocos ao mostrar as possibilidades do CSS por meio do CSS Zen Garden
  • Ele encerrou a discussão ao provar que era possível criar designs incríveis com CSS

• Este site é antigo, mas era bom no melhor sentido possível

  • No começo dos anos 2000, foi um dos motivos que me levaram a sair do Microsoft ASP.NET e desenvolver apps em Linux
  • Alex Russell trouxe novas informações por meio do Dojo JS e me fez perceber a importância das notícias de tecnologia
  • Eu usava um toolkit composto por Web.py, HTML, JS e CSS, e depois vieram jQuery, Backbone, Underscore, React e TS

• O ponto principal do CSS Zen Garden era que, aproveitando ao máximo um HTML semântico, apresentação e conteúdo podiam funcionar de forma totalmente independente

  • Era possível implementar o design dentro das limitações do CSS
  • Para mudar o estilo, muitas vezes era preciso modificar o DOM diretamente
  • Era necessário misturar, no nível de HTML e Javascript, as decisões sobre apresentação e estrutura do conteúdo

• Como alguém que aprendeu CSS com o Zen Garden e com Eric Meyer, ferramentas modernas de CSS como Tailwind parecem um antipadrão

• Foi uma luz em meio à era sombria de Tailwind e CSS-in-JS

  • É difícil perceber hoje a importância que o CSS Zen Garden teve há 20 anos

• É antigo, mas é bom

  • Serviu de base para ensinar web design a estudantes do ensino médio de baixa renda
  • Os alunos precisavam explicar CSS em competições de web design, e muitos ganharam computadores desktop
  • Enviei perguntas para Dave Shea, Eric Meyer, Andy Budd e outros, e recebi ajuda

• Enviei dois designs e ainda hoje recebo pedidos para reutilizar aquele CSS

• Este site teve um grande impacto no passado

  • Era possível enviar CSS e imagens para o mesmo conteúdo HTML
  • Havia exemplos de design realmente marcantes

• Que nostalgia... Eu adorava o CSS Zen Garden, mas ele representava a filosofia de uma época em que o principal objetivo de um site era fornecer documentos

  • Um mundo rico em mídia acabou deixando essa visão para trás

• Fico feliz em ver o CSS Zen Garden no HN

  • Há insatisfação com "frameworks" de CSS como Tailwind
  • O Tailwind permite obter resultados "bons o suficiente" sem aprender como o CSS realmente funciona
  • O HTML acaba ficando com mais classes CSS do que conteúdo
  • Há uma tendência de tratar profundidade e domínio como algo opcional