Por qué NUNCA usar reset.css, sino normalize.css

A la hora de empezar con un website el navegador debe suponer un par de cosas. Él debe darle sentido a las etiquetas que hemos declarado y a esto le llamamos “estilos por defecto”

De esta forma las etiquetas de encabezados <hx> o cualquier etiqueta hasta <body> llevan estilos auspiciados por el navegador de nuestra preferencia.

Y si quieres referencias de tales estilos te dejo un par de enlaces interesantes:

Son viejos pero nos ayudan a dar una buena idea de lo que estamos hablando

Código :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Default styles</title>
</head>
<body>
<h1>Titulo de mi website</h1>
<h2>Subtitulo de mi website</h2>
<nav>
<ul>
<li><a href="">quien soy?</a></li>
<li><a href="">como me llamo?</a></li>
<li><a href="">para donde voy?</a></li>
</ul>
</nav>
<hr>
<section>
<article>
<h3>Titulo de post</h3>
<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>
</article>
</section>
<div>
<form action="">
<label for="">Suscribete</label>
<p>
<input type="text" placeholder="Nombre">
</p>
</form>
</div>
<footer>
<ol>
<li><a href="">@LeonidasEsteban</a></li>
<li><a href="">leonidasesteban.com</a></li>
</ol>
</footer>

</body>
</html>

Gracias a esto somos capaces de sin escribir una línea de CSS tener muy diferenciados todos los elementos pero a la hora de empezar con nuestros propio código no vamos a estar tan contentos con lo que nuestro navegador nos ha impuesto, por ejemplo <body> tiene un margen y siendo el padre de todo nuestro contenido no nos va a gustar tal idea y más importante que esto es que cada navegador decide que valor asignar a estilos estilos predefinidos.

Esto no tiene porque ser tan complicado y solo basta con reasignar el valor por ejemplo en el <body> margin:0; pero he aquí una tarea repetitiva que podríamos optimizar y mejorar.

Para esto en los viejo tiempos de las web hechas en dreamweaver y tablas un buen hombre “Eric Meyer” creó la que para ese entonces suponía la solución a nuestros problemas: “reset.css”.

Una hoja de estilos que tenía por funcion resetear todos estos estilos asignados por el navegador para empezar nuestra maquetación con un documento virgen sin alteraciones de ningún tipo

Aquí se encuentran las lineas mágicas: http://ift.tt/Xgzd5F

-Este es mi website ahora.-

Tengo sentimientos encontrados, no diferencio el título del website con el del post y todo parece lo mismo, simplemente no estoy contento con este resultado :(

Para la gente que ha pensado como yo se encontró una mejor solución: normalizar estilos en todos los navegadores.

Esta opción también nos ofrece una hoja de estilo normalize.css que enlazaremos antes de nuestros propios estilos como base del proyecto.

Este es mi website ahora.

La diferencias con el inicio de artículo no son muchas ante nuestros ojos pero se que no hay márgenes en el <body> y la fuente es una más linda.

¿Cuál es el beneficio de usar normalize.css?

Que tal como vimos los estilos en nuevo navegador favorito se van a ver en los demás. Sin sorpresas, sin desalineaciones ni deformaciones de fuente, además de tener soporte a HTML5.

Tiene multiples formas de instalarse:

  • Bajar el archivo normalize.css y agregarlo como una hoja de estilos
  • Puedes usar npm, component o bower para que sea en requerimiento de tu aplicación si eres de los más osados desarrolladores

Normalize está a la orden si usas preprocesadores gracias a su genial comunidad

Stylus

http://ift.tt/XgzfKw

SASS

http://ift.tt/XgzfKx

Less

http://ift.tt/1zwxPcW

Ahora cuéntame en los comentarios o en Twitter a @LeonidasEsteban si usas normalize.css o reset.css.

“Aún puedes ser parte del mejor curso de HTML5 y CSS3 de @mejorandola donde te acompañaré como profesor para enseñarte TODO lo que necesitas para construir interfaces envidiables en la web. Accede desde mejorando.la/online”

Enviar comentario

via Cristalab http://ift.tt/1zwxCGv

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: