CSS "orientado a objectos"

Sérgio Pereira

unread,

May 2, 2013, 6:12:52 AM5/2/13

to htm...@googlegroups.com

Olá a todos!

Depois de ler este artigo

http://24ways.org/2012/a-harder-working-class/

e ver este vídeo

http://www.youtube.com/watch?feature=player_embedded&v=hou2wJCh3XE

... pensei em aplicar estes princípios de CSS "orientado a objectos".

Por exemplo, em vez de css que aproveita o carácter semântico do html...

<div id="noticias">

<article>

<h1>

<p>

<footer>

#noticias article h1 {

... identificar-se-iam componentes usando classes ...

<p>

... que podem ser usadas em css assim

.noticia-titulo {

... ou para estilos comuns ...

*[class^=noticia] {

Vejo vantagens e desvantagens em ambos os métodos.

No primeiro caso temos um html mais "limpo" e um css que aproveita o seu carácter semântico.

No segundo temos um html que é independente das css desde que se preservem as classes, e temos ainda a possibilidade de adicionar progressivamente camadas de estilo através de sufixos.

Por isso continuo na indecisão sobre qual dos caminhos continuar. Talvez aqui na comunidade possa conhecer outras opiniões e experiências...

Obrigado.

Gaspar

unread,

May 2, 2013, 6:39:51 AM5/2/13

to htm...@googlegroups.com

Se for um projecto pequeno penso que o primeiro exemplo será o melhor, fica sempe mais limpo e leve.

Se for um projecto maior em que os estilos da class "noticia-titulo" sejam iguais aos da class "destaque-titulo", secalhar o melhor é usar só uma class, por exemplo "titulo"
e se me recordo do OOCSS eles aconselhariam era.

<h2 class="titulo">titulo da noticia<h2>

E caso houvesse uma diferença no titulo dos destaques seria

<h2 class="titulo style2">titulo do destaque<h2>

Gaspar

2013/5/2 Sérgio Pereira <sergio_...@mail.pt>

--
--
------------
http://html5pt.org
http://groups.google.com/group/html5pt?hl=en

---
Recebeu esta mensagem porque está inscrito no grupo "html5pt" dos Grupos do Google.

Para anular a subscrição deste grupo e parar de receber emails deste grupo, envie um email para html5pt+u...@googlegroups.com.
Para mais opções, consulte https://groups.google.com/groups/opt_out.

Mario Andrade

unread,

May 2, 2013, 8:36:20 AM5/2/13

to htm...@googlegroups.com

Relativamente a OOCSS uma das premissas é não utilizar IDs para aplicar os estilos e ter o cuidado de tornar os elementos o mais generalistas possível.

Supondo uma estrutura do género

<h1 class="section-container-title">Noticias</h1>

<h2 class="section-item-title">Titulo da notícia</h2>

</header>

<p>Texto referente à noticia</p>

</div>

</div>
</section>

Este cenário permite-me utilizar as class de CSS sem estarem dependentes de outros elementos, como por exemplo

.section-item {}

.section-item-title {}

em vez de

#noticias .noticia{}

.noticia .titlulo {}

O facto de utilizar a palavra noticia, implica que caso queira recriar exactamente o mesmo elemento para algo que não é noticia, tenha de replicar os estilos de forma a não induzir em erro quem, futuramente, possa mexer no projecto. Ex: usar o mesmo bloco numa listagem de produtos.

Normalmente adiciono classes com nome generalistas que me permitam aplicar estilos dependendo da sua relação com os elementos.

Utilizando o exemplo do HTML acima usando a class .box-small posso definir que para um bloco de noticias cada section-item tem 200 pixeis de largura, copiando exactamente a mesma estrutura

posso utilizar esta mesma class em outra situação onde os itens tenham 250 pixeis de largura.

.section-container {float:left; margin:20px; }

.section-item {float:left; padding:5px; background:#efefef; border:1px solid #ddd}

.news .section-item {width:188px;}

.products .section-item {width:238px; border:none; }

Sérgio Pereira

unread,

May 9, 2013, 5:29:56 AM5/9/13

to htm...@googlegroups.com

Na discussão que iniciei num grupo do Linkedin também sugerem esta metodologia para projectos de maior escala.

Do que entendo, a denominação das classes segue uma lógica semântica, mas não ao nível do conteúdo e mais ao nível da interface, ou seja, do user-interface-pattern usado ou da hierarquia da informação.