Usando classes CSS como decoradores - um bom padrão?

Estou criando um aplicativo da Web com uma GUI bastante complexa - muitos pequenos elementos lado a lado e dentro de outros elementos que precisam de vários comportamentos (arrastar, clicar, mas sensíveis ao contexto).

Meu código tende a funcionar assim:

controles começam como tags html

<li>

então eu adiciono classes à tag

<li class = 'static passive included'>

algumas classes podem ser para o estilo css afetar a aparência

.static {background: blue; float: left;}

enquanto outros são acionados pelo jQuery para fornecer comportamento para os eventos DOM associados

$("#container").delegate(".passive", function {onclick : //do-stuff})

e outros podem ser detectados pelo javascript normal ao digitalizar o documento, por exemplo. colete os valores de texto de todos os nós com a classe 'incluída'. Portanto, certos elementos DOM são objetos da GUI que implementam classes definidas através de uma combinação de css e jQuery.

Minha pergunta é: essa é uma boa maneira de trabalhar? E também são realmente esses "decoradores" - eles certamente "adicionam responsabilidades adicionais a um objeto de forma dinâmica", mas não tenho certeza sobre esse termo. Por fim, você usa esse padrão em seus próprios sites?

Eu acho que o que você está fazendo está morto. Os benefícios do uso de classes, em vez de criar nomes de atributos, é que você ainda pode validar a página. Nenhum navegador moderno ficará chateado com as classes CSS indefinidas, e elas são triviais para uso com o jQuery, et al.

As aulas são boas , mas eu consideraria os atributos de dados HTML também. Muitas vezes, um nome de classe simplesmente não transmite informações suficientes para ativar a conexão javascript apropriada (sem os nomes de identificação dos elementos codificados). Os atributos de dados HTML fornecem outra maneira de classificar e selecionar elementos e anexar dados a eles para propósitos auxiliares, como aprimoramentos baseados em JavaScript.

Com o jQuery, os atributos de dados HTML são tão simples de usar quanto as classes CSS.

Hmmm ... sim e não. Não há problema em fazer coisas assim, mas as classes realmente devem ser nomeadas para mostrar o que é comum sobre os dados dentro delas. Se não houver algo comum entre duas tags, há toda a chance de que o requisito das classes divergir mais tarde.

Requisito de exemplo:

• todos os itens de navegação ficarão brancos em azul, helvéticos com uma margem de 1px
• todas as descrições dos comentários serão brancas em azul, arial com uma margem de 4px e um preenchimento de 2px

É melhor dar a ambos uma classe de branco-azul onde

.whiteonblue {
  font-color: white;
  background-color: blue;
}

ou ter código repetido

.navitems {
  font-color: white;
  background-color: blue;
// more css
}

.commentdesc {
  font-color: white;
  background-color: blue;
// more css
}

Eu discuto o último. Não há conexão entre os itens de navegação e os comentários e, portanto, a probabilidade é de que, quando um muda, o outro não. Deseja realmente pesquisar no html a classe correta, remover a classe e adicionar uma nova (whiteonred) antes de ir para o CSS nesse ponto? Eu não.

Da mesma forma Javascript. Talvez você queira a mesma coisa ao clicar no design inicial, mas a probabilidade é de que, se uma for alterada, a outra não. É fácil dizer

$(".navitems, .commentdesc")

Se você seguir essa política, suspeito que descobrirá que sua pergunta desaparece rapidamente, mas, caso contrário, o que você está fazendo está bem.