Abstração longe do CSS

Question

Deixe-me deixar algo bem claro.

EU. Odiar.CSS.

É um pesadelo sem fim.Cada pequena mudança de layout parece um hack.As soluções para os problemas parecem muitas vezes envolver números agitados, como um chef tentando descobrir exatamente quanta noz-moscada colocar em seu futuro pudim de arroz famoso.Depois vem o problema de vários navegadores, os problemas de resolução múltipla.

..para encurtar a história, é uma dor.Uma PITA, se preferir.

Muitos frameworks procuram abstrair-se do HTML (tags personalizadas, sistema de componentes JSFs) em um esforço para tornar mais fácil lidar com esse problema específico.

Existe alguma coisa que vocês usaram que tenha um conceito semelhante aplicado ao CSS?Algo que faz muita mágica entre navegadores para você, suporta variáveis ​​semelhantes (por que tenho que digitar #3c5c8d toda vez que quero essa cor), suporta campos calculados (que são 'compilados' em CSS e JS), etc.

Alternativamente, estou pensando sobre isso corretamente?Estou tentando empurrar um bloco muito quadrado através de um buraco muito redondo?

Answer 1

Você sempre pode usar um mecanismo de modelo para adicionar variáveis ​​e campos calculados aos seus arquivos CSS.

Answer 2

O que descobri que funciona melhor é realmente aprender CSS.Quero dizer realmente aprenda CSS.

Pode ser uma linguagem confusa de aprender, mas se você ler o suficiente e praticar, eventualmente aprenderá a melhor maneira de fazer as coisas.

A chave é fazer isso o suficiente para que fique natural.CSS pode ser muito elegante se você souber o que quer fazer antes de começar e tiver experiência suficiente para fazê-lo.

É verdade que às vezes também é uma tarefa difícil, mas mesmo os problemas entre navegadores não são tão ruins se você realmente pratique e aprenda o que funciona e o que não funciona e como contornar os problemas.

Basta praticar e com o tempo você poderá se tornar bom nisso.

Answer 3

Se por acaso você estiver usando Ruby, há Atrevido.Ele suporta seletores hierárquicos (usando recuo para estabelecer hierarquias), entre outras coisas, o que facilita a extensão de uma perspectiva sintática (você se repete muito menos).

Eu certamente estou com você, no entanto.Embora eu me considere um pequeno especialista em CSS, acho que seria bom se existissem ferramentas para CSS como existem para Javascript (Prototype, JQuery, etc.).Você diz à ferramenta o que deseja e ela lida com as inconsistências do navegador nos bastidores.Isso seria ideal, penso eu.

Answer 4

Isso elabora minha resposta anterior.

Quando comecei a usar CSS, também pensei que era um problema ele não suportar variáveis, expressões, etc.Mas à medida que comecei a usá-lo cada vez mais, desenvolvi um estilo diferente para superar esses problemas.

Por exemplo, em vez disso:

a { color: red }
.entry { color: red }
h1 { color: red }

Você pode fazer:

a, .entry, h1 { color: red }

Você pode manter a cor declarada em um local fazendo isso.

Depois de usar CSS o suficiente, você será capaz de superar facilmente a maioria das inconsistências do navegador.Se você achar que precisa usar um hack CSS, provavelmente existe uma maneira melhor de fazer isso.

Answer 5

Desculpe dizer isso, pessoal, mas todos vocês não entenderam.

A palavra abstração É a chave.Digamos que você e Sally estejam fazendo um site.Você está estilizando formas enquanto ela arredonda os cantos.Você e ela definiram alguns seletores.

E se, sem saber, você escolheu nomes de turmas que não coincidem com os de Sally?Veja bem, você não pode "ocultar" (abstrair) os detalhes quando trabalha em CSS.É por isso que você não pode consertar um bug no IE e depois criar uma solução independente que outros possam usar como está, da mesma forma que você chama procedimentos em uma linguagem de programação, preocupando-se apenas com pré e pós-condições e sem pensar em como funciona por dentro.Você apenas pensa em o que você deseja realizar.

Este é o maior problema da web:carece completamente de mecanismos de abstração!A maioria de vocês exclamará: “É desnecessário;você para de fumar crack!"

Em vez disso, você fará o trabalho de, digamos, consertar bugs de layout ou fazer cantos arredondados ou debater sobre a "melhor" marcação para este ou aquele caso repetidamente.Você vai encontrar um site que explica a solução, depois copiar e colar a resposta e adaptá-la ao seu caso específico, sem nem pensar o que diabos você está fazendo!Sim, é isso que você fará.

Fim do desabafo.

Answer 6

Depois vem o problema de vários navegadores

Há esse isso ajuda a remover algumas inconsistências do IE.Você também pode usar jQuery para adicionar alguns seletores via javascript.

Eu concordo com Dan, aprenda e não é um grande problema, é até divertido.

Answer 7

Veja, este é o problema do SO - todas as respostas até agora apresentaram argumentos válidos e devem ser consideradas a resposta final.Deixe-me tentar resumir:

• CSS é bom! Para expandir ainda mais, há uma curva de aprendizado, mas depois que você aprender muitas coisas serão muito mais fáceis.
• (Algumas) inconsistências do navegador são solucionáveis genericamente.
• (Alguns dos seus) Variável e calculada a funcionalidade do campo pode ser cuidada por meio de qualquer mecanismo de modelagem que você usar.

Acho que uma combinação de tudo isso certamente resolve uma grande quantidade de problemas (embora, para ser justo, aprender CSS profundamente não seja uma opção para todos;algumas pessoas simplesmente não usam o suficiente para justificar o tempo).

Existem alguns problemas que nenhum dos pontos acima cobre (certos tipos de campos calculados exigiriam a escrita de uma biblioteca JS, eu acho), mas certamente é um bom começo.

Answer 8

Para suporte a variáveis, usei PHP com cabeçalhos CSS com grande efeito.Acho que você pode fazer isso em qualquer idioma.Aqui está um exemplo de php:

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }

Answer 9

As soluções para os problemas parecem muitas vezes envolver números agitados, como um chef tentando descobrir exatamente quanta noz-moscada colocar em seu futuro pudim de arroz famoso.

Eu só entendo isso quando tento fazer as coisas funcionarem no IE.

Se você aprender CSS a ponto de poder codificar a maioria das coisas sem ter que procurar a referência (se você ainda procura referências regularmente, você realmente não sabe e não pode reclamar, eu acho), e então desenvolver para Firefox/Safari, é um lugar muito bom para se estar.

Deixe a dor e o sofrimento da compatibilidade do IE para o fim depois que ele funcionar no FF/Safari, para que sua mente atribua a culpa ao IE, onde ele pertence, e não ao CSS em geral.

Answer 10

Variáveis ​​CSS estão vindo (relativamente) em breve, mas concordo que já deveriam ter acontecido há muito tempo.Enquanto isso, é possível usar um mecanismo de modelagem CSS como o Sass, ou até mesmo a linguagem web dinâmica de sua escolha, para gerar suas folhas de estilo programaticamente.

Answer 11

Para estruturas CSS, você poderia considerar Grades YUI.Torna o layout básico muito mais rápido e simples, embora usado em sua forma bruta comprometa a semântica.

Answer 12

A chave para uma compreensão real do CSS (e das dores de cabeça do navegador) é uma compreensão sólida do modelo de caixa usado pelos padrões CSS e o modelo incorreto usado por alguns navegadores.Depois de aprender isso e começar a aprender os seletores, você se afastará das propriedades específicas do navegador e o CSS se tornará algo que você espera ansiosamente.

Answer 13

Confira também ProjetoCSS, uma estrutura de layout em CSS.Isso não resolve todos os seus problemas, mas muitos, e você não precisa escrever o CSS sozinho.

Answer 14

Acredito que os erros comuns que os iniciantes cometem com CSS têm a ver com especificidade.Se você está estilizando o a tag, você tem certeza de que realmente deseja estilizar cada um deles no documento ou uma determinada "classe" de a Tag?

Normalmente começo sendo muito específico com meus seletores CSS e generalizo-os quando acho adequado.

Aqui está um artigo humorístico sobre o assunto, mas também informativo:Guerras de Especificidade

Answer 15

CSS leva um pouco de tempo para aprender, mas o que inicialmente achei mais desanimador foi o fato de que foram necessários tantos hacks para fazer com que todos os navegadores se comportassem da mesma maneira.Aprender um sistema que não segue a lógica parece idiota...mas agarrei-me à vaga crença de que existe uma lógica por trás da idiossincrasia de cada navegador, na forma da especificação W3.Parece que os navegadores da nova geração estão lentamente entrando na linha – mas o IE6 ainda torna minha vida um inferno diariamente.

Talvez criar uma camada de abstração entre o código CSS compatível/válido e as implementações de má qualidade dos navegadores não seria uma coisa ruim.Mas se tal coisa fosse criada - precisaria ser alimentada por JS (ou jQuery)?(e isso criaria um encargo excessivo em termos de custo de processamento?)

Descobri que é útil 'nivelar o terreno' ao criar scripts com CSS.Provavelmente existem muitos tipos diferentes de scripts de redefinição por aí - mas usar redefinições de YUI me ajudou a reduzir o número de peculiaridades que eu encontraria - e as grades YUI às vezes tornam a vida um pouco mais fácil.

Answer 16

@SCdF:Acho que seu resumo aqui é justo.Mas o argumento de que algumas pessoas não têm tempo para aprender CSS é falso - pense por um segundo.Substitua por uma tecnologia que você já domina e verá por quê:

EU.Odiar.Java.Existe algo por aí que vai escrever isso para mim?Nem todo mundo tem tempo para dominar Java.

CSS é certamente uma tecnologia imperfeita - tenho grandes esperanças de que daqui a 5 anos não estaremos mais lidando com incompatibilidades de navegador (estamos quase lá) e que teremos melhores ferramentas do lado do autor (já escrevi uma macro do Visual Studio para meu próprio uso que fornece o tipo de variáveis ​​​​e cálculos que você descreve, portanto não é impossível) - mas insistir que você deve ser capaz de usar essa tecnologia de forma eficaz sem realmente entendê-la simplesmente não é razoável .

Answer 17

Se você está pensando sobre isso corretamente, provavelmente ainda precisará entender as diferentes implementações de CSS do navegador.Isso é apenas entender o ambiente em que seu aplicativo vive.

Esclarecer:não se trata de entender CSS.Se você conhece bem a linguagem, ainda terá que lidar com a redundância, a duplicação e a falta de estruturas de controle na linguagem.

Tenho escrito CSS de forma sólida há mais de 10 anos e cheguei à conclusão de que, embora a linguagem seja poderosa e eficaz, implementar CSS é uma droga.Então eu uso uma camada de abstração como Atrevido ou Menos ou xCSS para fazer interface com o idioma.Essas ferramentas usam uma sintaxe semelhante ao CSS para que você resolva o problema no domínio do problema.Usar algo como PHP para escrever CSS funciona, mas não é a melhor abordagem.

Ao ocultar os problemas da linguagem por meio de uma camada de abstração, você pode entregar um produto melhor que manterá sua integridade durante todo o ciclo de vida do seu projeto.Escrever CSS manualmente acelera podridão de software a menos que você forneça documentação sólida, o que a maioria dos codificadores CSS não fornece.Se você estiver escrevendo um framework CSS bem documentado, provavelmente não o escreveria à mão.Simplesmente não é eficiente.

Outro problema com CSS é devido à falta de suporte para aninhamento de declarações de blocos.Isso incentiva os codificadores a construir um conjunto simples e global de classes e a lidar com as colisões de nomes com uma convenção de nomenclatura.Todos nós sabemos que os globais são maus, mas por que escrevemos CSS dessa forma?Não seria melhor dar um contexto às suas classes em vez de expô-las a todo o modelo de documento?E sua convenção de nomenclatura pode funcionar, mas é apenas mais uma tarefa que você deve dominar para escrever a linguagem.

Eu encorajo aqueles de vocês que se orgulham de escrever bons CSS a começarem a aplicar algumas das melhores práticas de programação à sua marcação.Usar uma camada de abstração não significa que você não tem habilidade para escrever um bom CSS, significa que você limitou sua exposição aos pontos fracos da linguagem.

Answer 18

Você não precisa de uma abstração do CSS – você precisa perceber que o próprio CSS é uma abstração.CSS não se trata de colocar pixels na tela.Em vez disso, trata-se de escrever um sistema de regras que ajude o navegador a tomar essas decisões por você.Isso é necessário porque no momento em que você escreve CSS, você não sabe a que conteúdo o navegador o aplicará;nem você conhece o ambiente onde o navegador fará isso.

Dominar isso leva tempo.Você não pode aprender CSS em um fim de semana e estar pronto para começar.É um pouco enganador, porque a língua tem uma barreira de entrada muito baixa, mas as águas correm profundo.Aqui estão apenas alguns dos tópicos você deve procurar dominar para ser proficiente em CSS:

• A cascata e a herança
• O modelo de caixa
• Métodos de layout incluindo floats e o novo flexbox
• Posicionamento
• Melhores práticas atuais, como SMACSS ou BEM, para manter seus estilos modulares e fáceis de manter

Você não precisa saber tudo isso de antemão, mas deve continuar avançando.Assim como acontece com outras linguagens e programação em geral, você precisa buscar continuamente aprender mais e dominar o ofício.CSS é uma parte fundamental do desenvolvimento web, e mais desenvolvedores precisam tratá-lo com o mesmo respeito que dispensam a outras linguagens.