Ney Simões
As regras são claras ao ponto dos comportamentos serem previsíves quando utilizados. Adicionar mais estilos deve ser feito de forma fluida seguindo o padrão de toda a aplicação. Alterar ou adicionar estilos não deve afetar outras partes da aplicação.
Os estilos devem ser abstraídos e desassociados ao ponto de você poder reutilizá-los. Usando regras já existentes para novos componentes.
Quando precisar alterar, adicionar ou reorganizar o conteúdo da aplicação, isso não deve exigir refatoração no código existente. Adicionar um novo componente à uma página existente não deve afetar outros componentes.
Não importa se a equipe de front-end é composta por uma ou cem pessoas. O CSS deve ser facilmente gerido e mantido.
Um dos erros comuns é usar o elemento pai para determinar o contexto dos filhos.
Um bloco é uma entidade independente, um "bloco de construção" de uma aplicação. Pode ser simples ou composto (contendo outros blocos).
Um elemento é uma parte de um bloco que executa uma certa função. Elementos são dependentes do contexto: eles só fazem sentido no bloco a que pertencem.
O uso do modificador é opcional. Basicamente você cria um bloco e mudando o modificador você altera a aparência dele.
Usando a metodologia BEM como base
Blocos são únicos por isso seus nomes também devem ser. Pode ser adicionado um prefixo para facilitar na hora da nomenclatura. A classe é o próprio nome.
Seu nome deve ser único dentro do contexto do bloco, mas pode se repetir de um bloco para outro. A classe é o nome do bloco seguido pelo nome do elemento separado por dois sublinhados (__).
O nome do modificador é composto pelo nome do bloco ou elemento a que pertence. O nome do modificador é delimitado com um único sublinhado (_) ou dois hífens (--).
Usando a metodologia SMACSS como base