La que expongo es mi forma de trabajar a la que he llegado de forma personal después de muchos años editando html/css. Es la que me gusta y no puedo afirmar que sea la mejor, es la mejor para las características de mi trabajo y posiblemente en otras circunstancias no sea adecuada o no sea posible seguir. Por ejemplo si usas mi odiado Bootstrap, directamente puedes pasar de leer lo siguiente porque su filosofía es totalmente opuesta, y para cambiar el diseño exige editar el contenido y modificar la estructura del HTML, sin tocar el .css y yo soy partidario de lo contrario.
Una de las premisas en que me baso es que el código, tanto HTML como CSS sea lo mas corto y sencillo posible y una forma de conseguir ambas cosas es aprovechar las convenciones web en las etiquetas, con lo que ademas el código es más fácil de leer y “universal”. Otra de las premisas es que “todo” lo referente a diseño debe estar en el .css, utilizamos la cantidad mínima de clases necesarias para poder acceder a cualquier elemento sin tener que añadir código extra.
De esta forma, un titular no sera un div con una clase especifica sino que siempre será un <h1>, un subtitular un <h2>, las cabeceras estarán en un <header> y el pie de página no sera un div con la clase .footer sino un <footer>
Utilizaremos toda la gama de etiquetas indicadoras de la función de elementos que tenemos en HTML5, las etiquetas semanticas main, article, section, nav, etc.
Para definir las características concretas de cada elemento según el lugar donde esté, aprovecharemos al máximo la herencia de propiedades y las medidas relativas en em´s en vez de absolutas en pixels.
De esta forma, un titular <h1> tendria una font-size de 2em, pero si está dentro de un articulo en vez de en portada, su tamaño seria disminuido con un 0.6 em, por ejemplo. Nunca utilizaremos dos clases distintas tipo .titular_home y .titular_articulo.
Si tuviéramos que cambiar una propiedad de un titular, no lo haríamos añadiendo/modificando una clase en el propio h1, sino que lo haríamos usando la jerarquía del DOM, teniendo en cuenta donde está, por ejemplo:
.featured article h1{
Esto también nos facilita modificar todos los tamaños de la web de golpe cambiando el font-size del body, bien por asuntos de accesibilidad o en función del responsive.
Evitaremos en lo posible utilizar tags para funciones de diseño, en un mundo ideal, las etiquetas (y los nombres de clases) solo deberían indicarnos la función de los elementos, y deberíamos poder cambiar totalmente el aspecto de una web solo modificando su .css.
No deberíamos (en lo posible) utilizar divs vacíos para cosas como distribuciones o espaciados, hoy en día tenemos muchísimas herramientas, como flex, para evitarlo.
Si tenemos que poner elementos que sean de diseño, aunque “aparenten” ser contenido, como las viñetas de los <li>, iconos e imagenes de adorno utilizaremos :before y :after.
Huimos de cosas como las colecciones de fuentes en .css tipo fontawesome que exigen introducir tags vacíos para insertar un icono, siempre podemos importar la fuente con un font-face y colocar el carácter donde sea necesario con un :before sin necesidad de añadir otra hoja de estilos que no aprovecharemos al 100% y de meter código innecesario en el HTML.
Si la imagen es pequeña, incluso podemos incluirla directamente en el .css convirtiéndola a base64 optimizando la velocidad de carga (si la imagen es grande, aunque sigue siendo posible, ya no es “rentable”en Kb.)
[continuara…]