Preguntas y Respuestas

por Natalia Ventre el ・ podés leerlo en 4 minutos ・

Hoy recibí 2 preguntas interesantes de lectores, así que decidí inaugurar una nueva sección de preguntas y respuestas.

SEO en Apuntes al Margen

Rioth, no hago nada complejo a nivel de SEO, sólo lo básico. Sigo las indicaciones de la Guía para principiantes sobre optimización para motores de búsqueda de Google:

  • Para crear contenido interesante y útil me inspiro en preguntas que veo en comunidades de Google+.
  • Hay temas que me interesan y sobre los cuales ya hay muchos artículos publicados, entonces para crear contenido único y exclusivo los trato desde un punto de vista diferente. Por ej. sobre optimización de performance hay muchísimo material enfocado al front-end, así que escribí sobre las decisiones de diseño que afectan la velocidad web.

La guía que mencioné más arriba es del 2011, en la Academia para webmasters hay información más actual. Hay muchos consejos que no aplican a mi sitio, lo que sí hice fue crear un perfil en Google+ y vinculé el contenido que publico en Apuntes al Margen y Medium (autoría de Google).

Ejemplo de SMACSS

Me encantaría un artículo con ejemplo de SMACSS del cual te parece más recomenable. Si puedes, sería extraordinario. Tu humilde seguidor, Saludos. — Adrián Faúndez Saint-Jean

Adrián, te aclaro que actualmente estoy trabajando en pequeños/medianos proyectos web y estoy aplicando los conceptos de SMACSS para re-utilizar código entre proyectos y para rápidamente realizar cambios en sitios en los cuales no trabajo a diario.

Cómo aplico SMACSS

En base defino los estilos que uso en todos los proyectos. Las variables las defino en un archivo aparte.

Ejemplo de código base (Sass):

body{
	background-color: $color-fondo;
	color: $color-texto;
	font-family: $fuente-general;
	font-size: $talle-mediano;
	margin: 0;
}

h1{
	font-family: $fuente-especial;
	font-size: $talle-extra-grande;
	line-height: 1;
	margin: 0 0 ($ritmo-vertical * 3) 0;
}

/* etc. etc. */

Para layout generalmente uso mixins de Bourbon o un sistema de grilla. Las media queries según plantea Jonathan Snook en SMACSS, las trato como un estado y las defino junto al módulo.

Ejemplo de módulo con media queries:

.foo{
	/* estilos del módulo */

	@include adaptarse-a(30em){
		width: flex-grid(8);
	}
	@include adaptarse-a(50em){
		width: flex-grid(4);
	}
}

Para crear los módulos y estados a partir del “diseño” en sentido amplio, que puede ser desde un boceto en papel hasta un mockup, hago un esquema que incluye el HTML necesario y los nombres de los selectores de clase y los estados y lo uso como guía para generar el HTML y definir los estilos CSS.

Notas:

  • Se sobreentiende por ej. que los inputs tienen un estado :focus y los enlaces :hover.
  • En HTML5 por ej. el elemento footer se puede usar para el sitio o para cada section o article, por ese motivo a todos los módulos del sitio en general, les agrego el prefijo s- de sitio.
  • La motivación de hacer un esquema de este tipo es tener una referencia o guía para usarlos en todos los proyectos (que no usan Bootstrap u otro framework que imponga sus propias convenciones). Parece mentira, pero se pierde tiempo pensando qué nombre de clase elegir o qué markup usar.
Modulos en SMACSS
Definición del HTML y selectores de clase de módulos. Está indentado para facilitar la lectura, pero si estuviera escrito en una única línea se podría expandir via Emmet para generar el HTML.

Qué hago diferente a SMACSS y por qué

En SMACSS se platea definir cada módulo en un archivo. Es una excelente idea para organizar el código y trabajar en equipo, pero para proyectos pequeños, la relación costo - beneficio no es rentable.

Para los tratamientos visuales que se repiten, en SMACSS se plantea crear una clase tema y agregarla al HTML. Tiene sentido en sitios web grandes o aplicaciones web porque permite cargar sólo el CSS necesario para una determinada sección. Para sitios web sencillos donde en producción hay una única hoja de estilos, prefiero usar los placeholder selectos de Sass, como detalla Ian Storm Taylo en OOCSS + Sass = The best way to CSS. Al nombre, sí, me parece buena idea agregarle el prefijo tema- para identificar que es un estilo cosmético y diferenciarlo de otros usos que le doy a los placeholders selectors.

Conclusiones

Espero haber contestado satisfactoriamente las preguntas. Esta sección es experimental, si tenés alguna pregunta me la podés mandar mencionando a @nataliav en Twitter o +Natalia Ventre en Google+. ¡Hasta la próxima!