Conflito con 2 hojas css adjuntas

Buenas tardes:
Estoy empezando con la maquetación de páginas web y me encuentro con un problemilla:
He diseñado una página que lleva adjunta una hoja css.
He duplicado esta página con todas sus caracteristicas para diseñar otra sección del sitio y le he adjuntado una hoja css más para diseñar cosas puntuales de esta. la primera hoja adjunta sigue hay para diseño general del sitio.

Mi pregunta es:
1. En un sitio con varias páginas como se actua a la hora de adjuntar el css en una sola hoja css o en varias dependiendo de las paginas que tenga? por ejemplo about.css, services.css, etc o en una misma estilos.css.

2. Cuando he duplicado la 1º página para hacer la 2º y le he adjuntado la 2º hoja css he notado que en la propiedad width de <figure> en comun de una sección que tenía en 33% y que he cambiado a 50% no me deja. Si la 1º css se carga y despues de carga la 2º para personalizar como existe este conflicto?

La jerarquía de reglas CSS se da por cual se cargo último y por cual es más precisa, esto es normalmente la última regla reemplaza a la anterior si se refieren al mismo selector

Código CSS :

.mi_selector {
  width: 33%;
}

.mi_selector {
  width: 50%;
}

En este caso el ancho quedaría como 50%, ahora bien si una regla es mas precisa que otra prevalecera sobre otra no tan precisa

Código CSS :

body #mi_div p.mi_selector {
  width: 33%;
}

.mi_selector {
  width: 50%;
}

En ese caso el ancho final sera de 33% para la etiqueta que case con ese selector a pesar de los dos definir .mi_selector y el de 50% se encuentra después del de 33%

Lo mismo pasa si jalas 2 archivos CSS el ultimo sobrescribirá las reglas del primero, y si hay confilictos usa la opcion !important de la siguiente manera

Código CSS :

.mi_selector {
  width: 33% !important;
}

.mi_selector {
  width: 50%;
}

De esta manera prevalcerea el ancho de 33% a pesar de estar por delante del de 50%.

Espero te haya sido de utilidad.

Gracias por la aclaracion.
Saludos