CSS "orientado a objectos"

42 views
Skip to first unread message

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
e ver este vídeo
... 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 ...
<div id="noticias">
     <article class="noticia">
          <h1 class="noticia-titulo">
          <p>
          <footer class="noticia-rodape">

... 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

<section class="section-container news">
    <h1 class="section-container-title">Noticias</h1>
    <div class="section-item box-small">
        <header class="section-item-header">
            <h2 class="section-item-title">Titulo da notícia</h2>
            <p class="section-item-date">2 Maio 2013</p>
        </header>
       <div class="section-item-body">
           <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.

Será que o desenvolvimento do ARIA irá simplificar esta questão?

Reply all
Reply to author
Forward
0 new messages