En la terminología de BEM (https://www.espai.es/blog/2016/07/metodologias-css-oocss-bem-smacss/), un bloque es un componente de interfaz de usuario independiente, modular. Un bloque puede estar compuesto de varios elementos HTML, o incluso varios bloques. Un ejemplo de un bloque podría ser un menú de navegación o un formulario de búsqueda. Un elemento es un componente de un bloque. Un elemento sirve un propósito singular. Por ejemplo, si tenemos un bloque de menú de navegación, sus elementos podrían ser los elementos de la lista (elementos li) y los links (elementos a). Un modificador es una clase css que cambia la presentación de un bloque o un elemento.

Bloques
Entidad independiente que tiene significado por sí misma. (header, container, menu, checkbox, input…)
Elementos
Partes de un bloque que no tienen un significado independiente. Están semánticamente vinculados a su bloque. (elemento de un menú, elemento de una lista, titulo de un header, caption de un elemento picture, etc…)
Modificadores
Indicadores de bloque o elemento. Utilizados para cambiar la apariencia o comportamiento. (disabled, highlighted, checked, fixed, size big, color yellow…)

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

	<button class="button">
    Normal button
</button>
<button class="button button--state-success">
    Success button
</button>
<button class="button button--state-danger">
    Danger button
</button>