Orientação a Objetos em CSS
Postado por: Pedro Rogério emA orientação a objetos, também conhecida como Programação Orientada a Objetos (POO) ou ainda em inglês Object-Oriented Programming (OOP) é um paradigma de análise, projeto e programação de sistemas de software baseado na composição e interação entre diversas unidades de software chamadas de objetos. Em alguns contextos, prefere-se usar modelagem orientada ao objeto, em vez de programação.
A análise e projeto orientados a objetos têm como meta identificar o melhor conjunto de objetos para descrever um sistema de software. O funcionamento deste sistema se dá através do relacionamento e troca de mensagens entre estes objetos.
Na programação orientada a objetos, implementa-se um conjunto de classes que definem os objetos presentes no sistema de software. Cada classe determina o comportamento (definido nos métodos) e estados possíveis (atributos) de seus objetos, assim como o relacionamento com outros objetos.
C++, C#, Java, Object Pascal, Objective-C, Python, Ruby e Smalltalk são exemplos de linguagens de programação orientadas a objetos. ActionScript, ColdFusion, Javascript, PHP (a partir da versão 4.0), Perl (a partir da versão 5) e VB.NET são exemplos de linguagens de programação com suporte a orientação a objetos.
Orientação a objetos no CSS
Uma das coisas mais complicadas em CSS é cada pessoa escreve as folhas de estilo em cascata da maneira que mais lhe convém, não pensando em otimização, gerando assim uma redundância de elementos. Foi pensando nisso que Nicolle Sullivan chegou a aproximação da Orientação a Objetos em CSS(OOCSS), de forma a criar módulos reutilizáveis de forma a serem criadas folhas de estilo mais claras, leves e limpas, inclusive em sites grandes.
Essa apresentação criada por Nicolle Sullivan leva a metáfora de se criar peças de lego para criar nossos sites, de forma que se mantenha a consistência do design, respeitando padrões web e a semântica.
Um exemplo do código pode ser baixado através do GitHub. Via Ajaxian.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Agora sim vai unir tudo ao útil e agradável.
Muito Bom, essa é uma pratica que ja tenho à algum tempo, porem vi algo que tenho outra opiniao e gostaria de somar.
ele diz no slide 51 que NUNCA se deve especificar um elemento, é importante lembrar que, Especificar Elementos é uma prática de SEGURANÇA, use-a com moderação, existem momentos que você precisar-a de algo que já foi feito anteriormente porem para os ou ele precisa ser diferente, ao inves de criar mais uma classe você pode só especificar. bem fica a minha opinião, no mais está tudo muito bem colocado…
a uns 4 meses estou trabalhando com css modular, estou criando uma folha de estilos que otimize as interfaces q eu crio, e pre formate(posição, tamanho, borda, padding…) os elementos html, não esta 100% ainda, e modulo com com o que for necessario para ajustar o layout, tive um rendimento e resultados otimos nas minhas folhas de estilos/projetos.
a minha real intençao era acabar com a redundancia das minhas folhas de estilos( querendo ou não, muita coisa eh repetida no css).
a unica coisa q eu uso que foi citado nesse slide para não usar(ou eu intendi errado?), eh:
div.nome_classe{} pra ficar um pouco mais didatico e corresponder semanticamente ao objeto como menu(ul), colunas(div’s), grids(tables).
Muito bom.
Também costumo especificar no css a qual elemento a classe ou id se refere, ex:
div.topo {}
p.info {}
div#geral {}
Facilita absurdos na manutenção.
@William,
Só que se você desenvolver seu CSS todo dessa forma, fica difícil de utilizar mais herança e criar código reutilizável. Utilize com pacimônia.
Pelo que entendi é uma boa prática de desenvolvimento para reaproveitamento de código css, voltada para os conceitos de orientação a objetos ?
* Não sabia que no css orientado a objetos é possível usar herança, muito bom o post.
Eu já trabalhava com OOP CSS e nem sabia, não em toda a prática sugerida mas boa parte dela.
Mas não me limito a isso, tá mais pra imposição que solução, aonde surgiu essa idéia de OOP CSS ?