10 Principios de los maestros en CSS

28ene09

En lo que se refiere a CSS, hay muchos recursos y supuestos “tips de expertos” en la Web. Éstos vienen de auto-proclamados gurús que no tienen crédito alguno en el mundo del diseño. Mientras algunos de sus puntos son ciertos, ¿cómo saber si es un tip de CSS válido o sólo un truco que no ha sido probado?

En vez de confiar en los consejos de recursos desconocidos, profundicemos con diseñadores que tienen excelentes antecedentes. Estos tips de CSS han sido recopilados de algunos de los diseñadores más respetados del planeta. Tienen portafolios para respaldar sus consejos, así que sabes de antemano que cada consejo es de la mejor calidad.

Debajo están 10 excelentes principios que cualquier desarrollador Web o diseñador puede encontrar útiles, importantes o desafiantes. Considera este consejo de hombres y mujeres que han recorrido el largo y difícil camino para alcanzar la excelencia en diseño. Estos son los verdaderos maestros de CSS.
Ten en cuenta su conocimiento y toma su sabiduría en tu próxima aventura diseñando.

 

 

1. Mantén CSS simple – Peter-Paul Koch

“Lo que más me molesta de los hackers de CSS es que siempre están buscando soluciones complicadas. Busca y encontrarás, si quieres complejidad, te tomará por sorpresa, nunca te dejará avanzar y tampoco te ayudará.”

Peter-Paul Koch es un padrino del diseño Web. Mientras que es un desarrollador de la vieja escuela y la mayoría de su portafolio Web está entre los años 1998 y 2000, ha trabajado con Apple y otros pesos pesados. Ha escrito un libro acerca de Javascript, pero no pienses que no tiene nada que decir acerca de CSS.

 

El peligro de las alteraciones CSS

Koch ha mencionado algo que todo diseñador y desarrollador Web debería tener en cuenta: mantén tu CSS simple. La simplicidad es algo difícil de alcanzar, especialmente en el diseño CSS. Hay muchas alteraciones de CSS que puedes encontrar para hacer que todos los exploradores se vean de la misma manera, sin importar la versión o el tipo. Aún así, hay un defecto fundamental al usar muchos trucos CSS. A medida que los exploradores evolucionan, es mucho más difícil estar al día con los cambios.

Koch deja claro un punto interesante acerca del desarrollo para la Web. El Internet como un todo, es un lugar muy impredecible, y tratar de adivinar cómo trabajará en el futuro es una estrategia muy mala.

“La Web es un lugar muy incierto. Nunca estarás seguro de si tus sitios trabajarán exactamente de la manera en que quieres que trabajen, ni siquiera cuando apliques todas las capacidades modernas de CSS, accesibilidad y uso. En vez de buscar falso confort en alteraciones o trucos, deberías aceptar la incertidumbre como principio básico.

Los exploradores no tienen perfecto soporte de CSS; especialmente para gente que está aprendiéndolo, lo que puede ser muy molesto. Sin embargo, las alteraciones o trucos de CSS no son la solución. Aceptar la manera en que la Web trabaja actualmente es lo más apropiado porque mantendrá tus sitios simples.”

Peter-Paul tiene razón no sólo en lo que respecta a CSS, sino al desarrollo Web como un todo. La simplicidad es la clave para codificar eficientemente.

 

 

2. Mantén las declaraciones CSS en una línea – Jonathan Snook

 

Jonathan Snook [link] es un diseñador increíblemente popular de Ottawa, Canadá, que se ha construido un nombre en los estándares Web y el diseño. Ha hablado en prestigiosas conferencias SXSW y ha publicado varios recursos técnicos de diseño a través de Sitepoint [link] .

Una de las claves de Jonathan para codificar CSS es mantener las declaraciones en una sola línea.

“La segunda podría verse más bonita, pero no me ayuda a encontrar nada. Cuando buscas algo en una plantilla, lo más importante es la serie de reglas (es decir, la parte antes de { and } ). Si estoy buscando un elemento, un id o una clase, tener todo en una línea hace que escanear el documento sea mucho más rápido ya que sencillamente ves más en una página. Una vez que he encontrado lo que estoy buscando, encontrar la propiedad que quiero es sencillo”.

Jonathan da un ejemplo simple de las declaraciones en una sola línea que se ven así:

Bien

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Mal

h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

No sólo te ayuda a escanear rápidamente tu CSS, sino que también te ayuda a que tus archivos CSS sean más pequeños al remover espacios y caracteres innecesarios.

 

 

3. Usa la forma abreviada de escritura – Roger Johansson

 

“La mayoría de la gente sabe y usa alguna forma abreviada de escritura, pero muchos no usan del todo estas propiedades útiles para ahorrar espacio”.

Roger Johansson sabe algunas cosas acerca de diseño Web. El diseñador Web sueco ha estado trabajando en Internet desde 1994, y tiene un popular blog de diseño [link] .

En lo que se refiere a soluciones simples y elegantes, Roger es uno de los más conocedores.

Johansson tiene un artículo que profundiza bastante en la importancia de la escritura abreviada de CSS [link] y da bastantes ejemplos de cómo usarla mientras codificas CSS. Aquí hay un ejemplo:

“Usar la escritura abreviada en estas propiedades puede ahorrar bastante espacio. Por ejemplo, para especificar diferentes márgenes para todos los lados de una caja, podrías usar esto: margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em; Pero esto es mucho más eficiente: margin:1em 0 2em 0.5em; La misma sintaxis se usa en la propiedad de padding (espacio entre borde y contenido)”

Mientras la escritura abreviada reduce el tamaño de la plantilla, también ayuda a organizar y mantener simple el código. CSS hermoso es CSS simple.

 

 

4. Permite a los elementos de bloque llenar espacio naturalmente - Jonathan Snook

El Sr. Snook tiene otro importante consejo que todo desarrollador Web debería seguir: permitir a los elementos de bloque llenar espacio naturalmente. Si hay un tema recurrente en el desarrollo CSS, es no forzar al código a hacer cosas que no está destinado a hacer. Esto significa, evitar alteraciones CSS y encontrar la solución más simple posible.

“Mi regla es, si defino un ancho, no defino un margen o padding. Así mismo, si fijo un margen o padding, no fijo un ancho. Lidiar con el modelo de caja puede ser muy molesto, especialmente si estás trabajando con porcentajes. Por lo tanto, fijo el ancho en los contenedores y luego fijo el margen y padding en los elementos dentro de ellos, y todo suele salir bien.”

La regla de Jonathan es muy buena para asegurarte de que tus layouts no dejarán de funcionar.

 

 

5. Fijar un elemento flotante – Trevor Davis


Los elementos flotantes, son probablemente una de las cosas más importantes a entender con CSS, pero saber cómo despejar elementos flotantes es necesario también.

Trevor Davis puede no ser un nombre tan conocido como Zeldman o Snook en el mundo del diseño, pero se merece una mención basada en su excelente portafolio de layouts [link] . Su blog
[link] es un excelente recurso para cualquier diseñador.

Despejar (clear) elementos flotantes (float)

En el artículo de Trevor “Las 6 técnicas más importantes de CSS que necesitas saber” [link] ha añadido un apartado que te puede ahorrar muchos dolores de cabeza al usar columnas en tus layouts.

“He creado una página simple con 2 columnas flotantes contiguas. [link] . Notarás en el ejemplo que el fondo gris no contiene las columnas flotantes. Entonces, lo más fácil es fijar los elementos contenedores como flotantes [link] Pero ahora, verás que el fondo del contenedor no tiene el área de contenido.

Dado que el contenedor tiene un margen 0, no queremos hacerlo flotante porque lo movería. Así que lo que podemos hacer es insertar un elemento de despeje [link] . En este caso, uso un div vacío para despejar. Ahora, hay otras maneras de despejar un flotante sin utilizar un div, pero he notado algunas inconsistencias con esa técnica, así que solo sacrifico un div vacío.”

 


6. Usa los márgenes negativos – Dan Cederholm


“A veces es más fácil lidiar con la excepción de la regla, que añadir declaraciones para todos los elementos alrededor de ella.”

La compañía de Dan Cederholm, SimpleBits es el motor de una compañía de diseño. Dan ha trabajado con:

• Google
• Blogger
• MTV
• Fast Company
• Inc.com

… y muchas otras Compañías Web de alto perfil. Afortunadamente, Dan comparte el conocimiento que ha obtenido trabajando con estas importantes compañías en su blog [link] . Aquí hay una regla para todos los diseñadores: Si Dan Cederholm dice algo, tú escuchas.

 

Márgenes negativos

Mientras puede parecer contrario al sentido común poner un signo negativo antes de cada declaración (por ejemplo margin-left: -5px), de hecho es muy buena idea.
Dan explica que usar márgenes negativos en elementos, es a veces, más fácil que tener que cambiar cada aspecto del diseño para que quede alineado de la manera que lo quieres.

“Hay situaciones donde usar márgenes negativos en un elemento puede ser la forma más fácil de moverlo del resto, llevando a cabo la excepción a la regla para simplificar el código”.

Puedes ver un ejemplo del uso apropiado de márgenes negativos aquí. [link]

 

7. Usar CSS para centrar layouts – Dan Cederholm

“¿Cómo centrar un layout de ancho fijo usando CSS?” Para aquellos que lo saben, es simple. Para los que no, encontrar las 2 reglas necesarias para hacerlo puede ser muy frustrante.”

No es una sorpresa que Dan vaya a hacer esta lista 2 veces.
Layouts centrados son ideas muy simples, pero por alguna razón no siempre funcionan tan fácil como parece. Centrar layouts con CSS puede ser frustrante para un principiante si nunca lo ha intentado antes.

Dan ha probado un método que usa frecuentemente para centrar layouts.

#container { margin: 0 auto; width: xxxpx; text-align: left; }

Muchos diseños modernos se basan en centrar layouts, así que éste método te será muy útil en algún punto.

 

 

8. Usar el DOCTYPE correcto – Jeffrey Zeldman


“Has escrito XHTML y CSS válidos. Has usado el DOM estándar para manipular los elementos dinámicos de la página. Aun así, en exploradores diseñados para soportar estos estándares, tu sitio falla. Probablemente sea debido al DOCTYPE.”

Jeffrey Zeldman es uno de los co-fundadores del excelente recurso A List Apart [link] , co-fundó y llevo a cabo The Web Standards Project [link] , corre a cargo de el estudio de diseño Happy Cog, y escribió un libro acerca de estándares para diseño Web. [link] .

 

Mal entendido de DOCTYPE (Declaración Tipo Documento)

El DOCTYPE de una página es uno de los aspectos más menospreciados del diseño. Usar el DOCTYPE adecuado es crucial, y Zeldman explica por qué.

“Usar una DOCTYPE incompleta, antigua o no usar DOCTYPE, hace que los exploradores entren en modo “quirks”, donde el explorador asume que has escrito de forma antigua o inadecuada y codificado de acuerdo a las normas de finales de los 90’s.”

Zeldman destaca la importancia de usar un DOCTYPE, y señala que tienes que añadir una URL en la declaración.

Si estás teniendo problemas inexplicables con tus layouts, es probable que la DOCTYPE pueda ser el problema.

 

 

9. Centrar Ítems con CSS - Wolfgang Bartelme


“Centrar ítems es una tarea frecuente cuando se diseñan páginas Web. Pero para algunas personas que son nuevas en CSS, es una especie de enigma como centrar, por ejemplo, un sitio entero en un explorador que no sea IE.”

Wolfgang Bartelme es un diseñador Web con Bartelme Design [link] , una firma de diseño Web. Bartelme tiene uno de los blogs con diseño más elegante, y continuamente crea excelentes iconos y trabajo de diseño [link] . Ha hecho mucho trabajo de diseño para la plataforma de Squarespace [link] , así como el popular MacHeist [link] .

Wolfgang ha creado un tutorial que ayuda con la complicada tarea de centrar elementos CSS. [link] .Elementos centrados son bastante útiles, pero a veces difíciles de lograr. El tutorial de Bartelme asegura alineación centrada usando la DOCTYPE correcta. El código no es nada ostentoso, hace el trabajo y nos ayuda a conseguir la simplicidad en CSS.

 

 

10. Utilizar comandos de text-transform (transformación de texto) - Trenton Moss


Trenton Moss tiene su propia compañía de utilidad Web [link] que da a la gente un entrenamiento de utilidad [link] y escritura Web

[link] . También escribe para sitios como Sitepoint [link] . Trenton da excelentes tips basados en su experiencia como experto en utilidad Web.

Es un hecho que los diseños cambian con el tiempo, especialmente la manera en que los textos se muestran en los sitios Web. Lo mejor que un diseñador puede hacer es tener en cuenta el futuro para asegurarse que en vez de tener que cambiar manualmente la forma en que se muestra el texto, es mejor usar CSS para cambiar su apariencia. Trenton Moss muestra cómo alcanzar esto a través de un simple y poco usado comando de CSS llamado text – transform.

“Uno de los comandos menos conocidos, pero muy útiles de CSS es el comando text-transform. Tres de los valores más comunes para esta regla son: text-transform: uppercase (mayúscula), text-transform: lowercase (minúscula), text-transform: capitalize (capitalizar). La primera regla convierte todos los caracteres a mayúsculas, la segunda a minúsculas, y la tercera hace que la primer letra de cada palabra sea mayúscula.”

Usar CSS para mostrar la apariencia del texto en el sitio, nos permite cambiar en el futuro y mantener las cosas consistentes con el paso del tiempo.

“Este comando es increíblemente útil para ayudarnos a asegurar la consistencia de estilo en todo el sitio, particularmente si tiene varios editores de contenido. Por ejemplo, si tu guía de estilo dicta que las palabras en los párrafos siempre deben empezar con una letra mayúscula. Para asegurar que ese siempre sea el caso, usa el comando “text-transform: capitalize”. Así, incluso si los editores olvidan poner la letra mayúscula al principio, su error no se mostrará en la página Web”.

Mientras el comando “text-transform” es algo pequeño para agregar a tu layout de CSS, puede hacer un mundo de diferencia cuando necesitas hacer cambios.

 


 



One Response to “10 Principios de los maestros en CSS”

  1. 1 oliverastro

    si bien, todas son muy interesantes, el tip Nº 2 no lo comparto, ya que si bien se hace m´s pequeño el css al escribirlo en horizontal, ya hay muchas herramientas que comprimen muy bien los css, js y demases para tenerlos en el servidor, un ejemplo es Yui-compressor.

    Lo otro es que en un código muy largo se hace muchas más fácil leer en vertical que en horizontal, además el indentar elementos que están anidados dentro de otros.

    los demás muy buenos tips..


Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

A %d blogueros les gusta esto: