CSS orientado a objetos: abordagem cativante da frase ou design legítimo?

Question

Parece que há um novo frasco de captura emergindo no campo de desenvolvimento da Web: CSS orientado a objetos.

Em face disso, isso me impressiona como simplesmente sendo a melhor prática embalada em um slogan cativante. Eu entendo e respeito totalmente as intenções por trás do movimento, mas há mais alguma coisa?

Alguém tem mais informações que diferenciam essa abordagem como algo mais credível ou devo apenas tomá -lo como um lembrete para garantir que eu herdei e cascatei minhas aulas corretamente?

Answer 1

Eu diria que é mais uma frase cativante para algo já presente no CSS. Obviamente, antes de começarmos a falar sobre o que é OO e o que não é e como o CSS é orientado a objetos, teríamos que definir o que realmente é - o que é algo com o qual os outros têm lutado antes e estão sujeitos a debates acalorados. Mas se assumirmos isso Os princípios básicos do OO são:

• Classe
• Objeto
• Instância
• Método
• Passagem de mensagem
• Herança
• Abstração
• Encapsulamento
• Polimorfismo
• Dissociação

Podemos dizer que as folhas de estilo em cascata são um tanto orientadas para objetos, porque permitem que as aulas sejam definidas, instâncias/objetos criados (atribuindo uma classe a um elemento), herança de classes (mesmo herança múltipla), abstração (por exemplo, definindo Estilos para os elementos simples) e polimorfismo (definindo o mesmo nome de classe para diferentes elementos). Obviamente, os métodos/passagem de mensagens não são possíveis, devido à natureza estática do CSS.

Então, em geral, eu diria que é uma abordagem válida para desenvolver CSS de maneira orientada a objetos, mas eu realmente não a chamaria de CSS orientado a objetos, porque pelo menos para mim, é algo profundamente inerente ao CSS. Seria um pouco como dizer "Estou fazendo java orientado a objetos ..."

Answer 2

A abordagem cativante da frase do zumbido e do design legítimo.

Embora eu pense que algumas das idéias são um pouco ingênuas, pois elas tendem a esquecer o paradigma da Web "muda de alteração do cliente, como é".

Answer 3

Eu acho que a palavra da moda de chamá-lo de "CSS orientada a objetos" está realmente prejudicando sua utilidade e a adoção mais ampla do conceito.

Quando li sobre isso, acho que a alegação de que foi realmente desacelerou minha compreensão do que realmente era.

Pessoas que sabem o que significa "orientado a objetos" na programação será cético, porque não é verdade OO, é? É apenas uma tentativa de aplicar alguns princípios de OO ao CSS para melhorar sua eficiência. Por outro lado, a maioria dos desenvolvedores do lado do cliente não entenderá o conceito se não forem programadores e, portanto, ficarão confusos ou envergonhados.

Então, ótimo conceito, precisa de rebranding. CSS máximo! Power CSS! CSS Reborn! CSS quadrado! CSS Prime! Algo parecido.

Answer 4

Eu tenho dito isso para anos.

Os seletores CSS são baseados em IDs e classes de instância. Até suporta herança múltipla. Quão mais óbvio poderia ser?

A beleza de pensar no CSS em termos de objetos é que se torna muito direto começar a "lançar" seus elementos de marcação. Precisa que essa div para se tornar repentinamente inotrenderedanymore? Apenas deixe o JS estender seu atributo de classe para combinar .removed, não mexa com propriedades de estilo.

Obviamente, esse é um exemplo bastante banal, mas os benefícios devem ser claros - especialmente no contexto da manipulação do JS. Você pode desacoplar o JS dos estilos reais que ele deve modificar, que é um bônus de manutenção e abstração, mas também tem benefícios marginais como não definir diretamente os estilos de alta especificidade (que o CSS não pode substituir).

Answer 5

Escrever esta resposta todos esses anos depois para a posteridade. Todas as respostas acima claramente nunca ouviram falar seriamente sobre CSS orientado a objetos. Quando o OP perguntou se era uma palavra da moda, isso deveria ter sido uma indicação de que a expressão se referiu a um assunto que merecia uma conversa (mais do que "o que queremos dizer com orientação a objetos?").

O CSS de orientação objetada é um termo que acredito ter sido cunhado pela evangelista de tecnologia do front-end do Yahoo, Nicole Sullivan, depois que ela consultou o Facebook para refatorar seu código de front-end da apresentação em algo mais fino e gerenciável que ainda possa ser estendido e modificado facilmente como tempo passou. O termo 'orientado a objetos' refere-se à natureza do próprio CSS (como tal), mas a uma abordagem para escrever CSS e a marcação afetada que presta à concisão e extensibilidade.

Alguns exemplos de princípios de OO CSS incluem:

• Evite usar IDs como seletores: o fato de que um objeto é único não significa necessariamente que suas propriedades principais devem ser definidas de tal maneira que eles substituam todos os outros.
• Evite seletores longos com base na marcação aninhada: definir a aparência de um elemento com base em sua localização incidental na estrutura de documentos geralmente é uma falácia lógica, e movê-lo para um novo local o forçará a reescrever o seletor. Assim como os mencionados acima, essa má prática também dá motivo para substituições ou extensões condicionais para precisar de força e especificidade extras em seus seletores, o que raramente é útil.
• Use marcação não semântica para criar elementos com fins de apresentação distintos, em vez de tentar sobrecarregar todas as especificidades da aparência de um elemento individual em uma regra. Isso leva a CSs menos detalhados.

Em última análise, o objetivo do OOCSS é seco. Você não deve escrever milhares de linhas de CSS quando está essencialmente criando variações de coisas semelhantes.

Nicole deu alguns Boas conversas Sobre o assunto - ela também escreveu alguns artigos que se expandem em alguns técnicas úteis empregar e práticas ruins evitar.

'Oocss' também é o nome do estrutura Ela escreveu que fornece algum código de caldeira para layouts CSS extensíveis. Como e por que essa estrutura é tão boa (o módulo de grades é algo que eu uso praticamente em todos os lugares) não é completamente evidente do código em si, e ler sobre suas postagens sobre as idéias por trás definitivamente ajudará a fazer melhor uso dele e CSS em geral.

Answer 6

Eu tenho consumido o OOCSS e as convenções de nomeação há algum tempo e nunca olharei para trás. Para aqueles que afirmam que é apenas uma "palavra cativante" ou "o CSS já faz essas coisas", não entende o potencial de escrever CSS usando essas duas metodologias.

Vejamos os objetos mais simples, uma lista com links. Ele vem em muitos sabores diferentes:

1. Menus

2. Barras de ferramentas

3. Guias

4. Painéis (bootstrap)

No OOCSS, encontramos as propriedades comuns de cada uma delas e criamos um objeto base. Eu geralmente chamo de navegação.

/*  Nav
    =================================================*/

    /*  B
        ---------------------------------------------*/

        .nav
        {
            margin-left:            0;

            padding-left:           0;

            list-style:             none;
        }

    /*  E
        ---------------------------------------------*/

        .nav__item
        {
            float:                  left;
        }

        .nav__link
        {
            display:                block;

            color:                  inherit;

            text-decoration:        none;
        }

    /*  M
        ---------------------------------------------*/

        .nav--right
        {
            float:                  right;
        }

        .nav--stack .nav__item
        {
            float:                  none;
        }

Você notará algumas coisas:

1. NAV é o objeto base que é aplicado ao elemento de bloco

2. Os elementos filhos são prefixados com Nav_

3. Modificadores são prefixados com NAV--

4. Um modificador é uma opção que muda de comportamento. Por exemplo -Floats -direita Nav à direita.

Depois de ter meu objeto base Witten, crio skins que mudarão a aparência do objeto. Isso o transformará em barras de ferramentas, guias, etc. A Microsoft possui guias Pivot em seus telefones. É uma pele mais fácil criar FPR agora.

/*  Nav
    =================================================*/

    /*  E
        ---------------------------------------------*/

        .pivot .nav__item
        {
            margin-left:            24px;

            color:                  #aaa;

            font-size:          36px;
        }

        .pivot .nav__item--active, .pivot .nav__item:hover
        {
            color:                  #000;
        }

Para usar este objeto e pele, você escreveria

<ul class="pivot nav">

   <li class="nav__item">

        <a class="nav__link"> Item 1 </a>

    </li>

   <li class="nav__item">

        <a class="nav__link"> Item 2 </a>

    </li>

</ul>

Devido à sua independência de localização, você também pode escrever como

<nav class="pivot nav">

   <div class="nav__item">

        <a class="nav__link"> Item 1 </a>

    </li>

   <div class="nav__item">

        <a class="nav__link"> Item 2 </a>

    </div>

</nav>

Por fim, você está separando o recipiente da pele. Eu sugeriria começar menor com o objeto Nicole Sullivans Media. Dê uma olhada no Twiter Bootstrap e Inuit.css para obter mais inspiração.

Answer 7

O termo "CSS orientado a objetos" é um nome impróprio.

"CSS orientado a objetos" é realmente apenas um padrão de design para obter mais do seu CSS e é basicamente a mesma abordagem que Jonathan Snooks chama SMACSS.

Quer você chame de oocss ou smacss, a chave para a abordagem é que você cria elementos de interface do usuário genéricos como o Abstração NAV. Esses elementos da interface do usuário podem ser aprimorados com recursos mais específicos, adicionando classes extras ao elemento e/ou um elemento de contêiner. Ou, como alternativa, você pode adicionar suas próprias regras CSS personalizadas usando as classes ID ou semânticas do elemento.

Estrutura em cascata é uma nova estrutura CSS com base nessa abordagem. Ele oferece desempenho ideal, flexibilidade ideal e modularidade ideal com apenas uma pequena pegada.

Answer 8

CSS é semelhante aos idiomas OO de várias maneiras: escreva

p { color: red }
p span { color: blue }

E você tem essencialmente a herança. Aqui está um exemplo mais complicado de ter Terrier Extend Dog Extend Classes:

.animal { font-weight:bold; color: blue; } 
.dog:before, .terrier:before { content: "GRRR"; }
.animal, .dog, .terrier { color: brown } 

Agora você pode usar aulas de animais, cães e terrier de maneira OO.

É importante lembrar que o CSS muito bom para resolver o problema para o qual foi feito: especificando os estilos para elementos de maneira transparente. Poderia ser melhor com mais conceitos de OO? Não tenho certeza. Digamos que alguém diga: O arquivo CSS seria mais simples se parecesse:

@class dog @derives_from animal /* the syntax i just invented */
@class terrier @derives_from dog

.animal { font-weight:bold; color: blue; } 
.dog:before { content: "GRRR"; }
.terrier { color: brown } 

Isso parece mais simples, mas uma solução ainda mais simples é soltar a coisa do @class ao adicionar 'cachorro' a qualquer 'terrier' e 'animal' a qualquer servidor 'cão' do lado do servidor (instrução trivial de substituição) ou com JavaScript.

A melhor coisa sobre o CSS é que ele é simples e recai facilmente, o que significa que os navegadores não precisam interpretar os CSs que não entendem e as coisas funcionam razoavelmente bem. Como você terá que quebrar essa compatibilidade com versões anteriores com as principais estruturas CSS, acho que isso torna o CSS orientado a objetos mais uma frase de zumbido.

Answer 9

É realmente uma daquelas coisas discutíveis como tabelas vs divs etc. etc.

Na minha opinião, há muitos desenvolvedores tão entrincheirados em OO que eles tentam enfiar tudo em tudo, primeiro javascript e agora css. Não me interpretem mal, JavaScript também tem elementos de OO, mas eu discordo.

Como o CSS já é uma palavra da moda em si (todos os empregadores desejam a abordagem da Web 2.0 CSS), muitos novos desenvolvedores estão descobrindo. Isso não é uma coisa ruim, no entanto, como desenvolvedores, eles fizeram o que fazem de melhor e tentaram melhorar o CSS. Em uma mente de desenvolvedores (sou desenvolvedor), organizar CSS de acordo com os princípios da OO, faz todo o sentido - daí o novo chavão.

Em última análise, o que estou tentando dizer é que o OO CSS é apenas uma abordagem que certas pessoas adotam, pois parece mais lógico. Se você estiver escrevendo CSS que será mantido pelos desenvolvedores, essa abordagem se adequará bem. Realmente se resume a você como você escreve seu CSS e seu próprio estilo pessoal ...

Pessoalmente, não me importo como as pessoas escrevem seu CSS - se ele cair em mim para mantê -lo, o Firebug torna o trabalho trivial de qualquer maneira.

Answer 10

Não há muito, acredito.

OOCSs Folha de estilos em cascata orientada a objetos

Reduz o código para repetir repetidamente e você pode definir um CSS global para foocontainer uma vez e reutilize em todos os lugares e tenha um estilo personalizado para header body e footer.

<div class="foocontainer header"> Your header </div> <!-- two classes -->
<div class="foocontainer body"> Your body </div>  <!-- two classes -->
<div class="foocontainer footer> Some footer </div> <!-- two classes -->

---

BEM Block-Element__modifier

Ele mantém o código fácil de ler, mas feio de escrever e você pode identificar facilmente as crianças com seus pais.

<div class="foocontainer--header"> Your header </div> <!-- one class -->
<div class="foocontainer--body"> Your body </div> <!-- one class -->
<div class="foocontainer--footer> Some footer </div> <!-- one class -->