que padrão de escrita foi usado na classe?

O nome app__button--add-task segue uma convenção de nomenclatura conhecida como BEM, que significa Block, Element, Modifier (Bloco, Elemento, Modificador). BEM é uma metodologia para nomear e classificar classes CSS de uma maneira que torne o CSS mais claro, reutilizável e mais fácil de entender. Vamos quebrar app__button--add-task de acordo com as regras do BEM:

• Block (app): Representa o nível mais alto de abstração e serve como um "bloco" de construção. Um bloco pode ser pensado como um componente ou um contêiner de alto nível que encapsula elementos relacionados. No seu caso, app pode ser um componente grande que engloba muitos elementos relacionados ao seu aplicativo.

• Element (button): Um elemento é uma parte de um bloco que realiza uma função específica. Elementos são sempre parte de um bloco e não podem ser usados fora do contexto de seu bloco. Eles são normalmente representados após o nome do bloco e separados por dois sublinhados __. No seu exemplo, button é um elemento dentro do bloco app, indicando um botão que pertence especificamente ao componente do aplicativo.

• Modifier (add-task): Modificadores indicam uma variante ou um estado diferente de um bloco ou elemento. Eles são utilizados para representar diferentes estilos ou comportamentos para um bloco ou elemento. Modificadores são adicionados ao nome do bloco ou elemento, separados por dois hifens --. No seu caso, add-task é um modificador para o elemento button, sugerindo que este é um botão específico com a funcionalidade ou estilo para adicionar uma tarefa.

Portanto, app__button--add-task pode ser interpretado como um botão (button) que é um elemento do componente app, e este botão tem a função ou estilo específico para "adicionar uma tarefa" (add-task).

Vantagens do BEM

• Legibilidade: Torna o propósito das classes mais claro e direto, facilitando o entendimento do que cada classe faz só de olhar para o nome.
• Escopo claro: Evita conflitos de estilo, especificando exatamente a que bloco ou elemento uma classe se aplica.
• Reutilizabilidade: Facilita a reutilização de componentes estilísticos em diferentes partes do projeto, já que a estrutura do nome da classe informa claramente sua função e aparência.
• Facilidade de manutenção: Torna mais fácil modificar o estilo de componentes específicos sem afetar outros elementos inadvertidamente.

Embora BEM seja bastante útil para projetos grandes e complexos, ele também pode ser adotado em projetos menores para promover melhores práticas de codificação e manutenção de CSS.