Los identificadores no están recomendados para maquetar.

Hay varias estrategias para personalizar un elemento concreto parte de un conjunto que toman sus estilos en una clase determinada.

<br>
Por ejemplo, imagina que de una serie de cajas con texto una debe de tener un color de fondo diferente:

[![introducir la descripción de la imagen aquí][1]][1]

<br>
**Caso 1.** Puedes añadir una clase específica, *como si fuera un id*.
<br>
Voy a usar unos estilos comunes:

    html {
        font-size: 12px;
        padding: 5%;
    }
    .box {
        background: pink;
        margin: 1% auto;
        padding: 5%;
    }

y añadiré al final una clase específica:

    .green-box {
        background: green;
    }

<br>
Este es el HTML:

    <body>
        <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>
    
        <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>
    
        <div class="box green-box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>
    
        <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, molestiae nihil deleniti dolorem impedit quibusdam eaque deserunt maxime aspernatur!</div>
    </body>

Esto funciona aun si inviertes el orden de las clases en el HTML:

    class="green-box box"

pero no si lo haces en el CSS:

    .green-box {
        background: green;
    }
    .box {
        background: pink;
        margin: 1% auto;
        padding: 5%;
    }

<br>
Los estilos se leen en cascada, de arriba abajo, el de abajo sobrescribe al anterior...

En el caso anterior, todo bien. Nueva norma, mas bien una recomendación: organizar los estilos alfabéticamente... y ahí tenemos un problema con ciertos nombres, por ejemplo: `blue-box` iría antes que `box`, y esta última machaca el color de la anterior... vamos al uso de `!important`.

Si usar ids para maquetar, usar `!important` es aún más feo y aunque lo siguiente funciona:

    .blue-box {
        background: blue !important;
    }
    .box {
        background: pink;
        margin: 1% auto;
        padding: 5%;
    }

<br>
No debes usar !important, aunque puede ser necesario para sobrescribir estilos de *bootstrap*, maquetados heredados y cosas así... Usos muy concretos, para los que se pueden crear clases como:

    .bg-blue {
        background: blue !important;
    }
    .bg-green {
        background: green !important;
    }

Que de estar presentes sobrescriben el fondo del elemento.



Para evitar este problema al ordenar las clases, si sabes que estas estan ligadas a su uso en los elementos `.box` las nombras prefijandolas con esta clase:

    .box {
        background: pink;
        margin: 1% auto;
        padding: 5%;
    }
    .box-blue-box {
        background: blue !important;
    }

<br>
**Caso 2.** Sumar clases para aumentar la especificidad del elemento.
<br>
Es otra solución a el problema del caso anterior, en este caso indicas que un determinado estilo solo aplique al elemento que tiene las dos clases:


    .blue-box.box {
        background: blue;
    }
    .box {
        background: pink;
        margin: 1% auto;
        padding: 5%;
    }

Y en el HTML irían las clases `box blue-box` en el elemento.

Nos daría algo como:

[![introducir la descripción de la imagen aquí][2]][2]

El `background` de la clase definida más abajo (box) no le afecta, porque le has dado una mayor especificidad.

<br>
***Nota:** fíjate que las clases van juntas en el CSS, si dejas un espacio en medio no funcionaría.*

<br>
Y hay más formas, CSS es muy extenso, pero están son seguramente las más comunes...


<br>Sobre especificidad CSS:
https://developer.mozilla.org/es/docs/Web/CSS/Especificidad


  [1]: https://i.sstatic.net/yRbAe.png
  [2]: https://i.sstatic.net/1cUUp.png