Como definir “objeto” no OOCSS?
Os objetos são semelhantes às classes em JAVA e mantêm características OO.
Um objeto CSS consiste em 4 partes:
Pode ser o HTML de um ou mais nós DOM
Declaração de estilo CSS começando no nome da classe do nó wrapper
Semelhante a imagens de fundo e componentes de sprites para exibição e
Comportamento, ouvinte ou método JavaScript associado a um objeto
Isso pode ser confuso porque cada classe CSS não é necessariamente seu próprio objeto, mas pode ser um componente de uma classe wrapper. por exemplo:
<div class="mod">
<div class="interior">
<div class="hd">Cabeça do bloco</div>
<div class="bd">Corpo do bloco</div>
<div class="ft">Pé de bloco</div>
</div>
</div>
O objeto é um módulo com classe mod. Inclui 4 nós de componentes (não podem ser independentes do módulo, incluindo 2 blocos, interno e corpo, e dois blocos opcionais, cabeça e pé)
Como o OOCSS melhora o desempenho?
OOCSS tem o dobro dos benefícios de desempenho:
Código CSS altamente reutilizável, exigindo muito pouco código CSS, o que significa:
Arquivos menores, resultando em transferências mais rápidas
À medida que aumenta a proporção de código CSS chamado nas páginas do site, espera-se que ele seja reutilizado ou armazenado em cache pelo navegador.
Menos redesenhos e cálculos de layout no que diz respeito ao navegador
Em uma única página, quanto mais regras CSS são reutilizadas, menos tempo de cálculo o mecanismo de renderização gasta em “valores computados”
Classes de "extensão" adicionadas manualmente substituem menos regras, o que novamente significa que o mecanismo faz menos para aplicar as regras
Você deseja usar o ID para estilizar o conteúdo?
Este é um "brinde" de desempenho quando você reutiliza um objeto na mesma página (ou no mesmo site, ambos bem armazenados em cache). Usar ID para escrever estilos só pode ser usado uma vez na mesma página. @cgriego (twitter) Comparei com singletons e acho muito preciso. Pode haver situações em que você queira usar IDs para definir estilos, como menus de cabeçalho muito específicos. Nesse caso, você pode usar IDs para colocar elementos especiais em sandbox e garantir que o código aqui não afete outras partes do site. Pense duas vezes antes de escolher o ID em vez da classe. À medida que seu site cresce, é muito difícil prever o que outras pessoas farão com o HTML criado a partir do seu CSS. Se você tiver escolha, considere a escalabilidade tanto quanto possível.
Estou pensando em remover os IDs do modelo cabeça, corpo e pé. Algumas pessoas podem ter várias áreas residenciais. Vários cabeçalhos e rodapés para um site são mais difíceis de adivinhar, mas aposto que há designers por aí que pensam assim, então os IDs provavelmente desaparecerão (não tão fácil, leia o artigo original: Alguém pode ter várias áreas de conteúdo principal. Múltiplas cabeçalhos e rodapés de sites são mais difíceis de imaginar, mas aposto que existe um designer que pode sonhar com algo assim, então é muito provável que os IDs desapareçam.).
Por outro lado, os ganchos de identificação são ótimos para vincular. Coloque-os em HTML, mas não os use para escrever estilos.
Fonte: 99css