Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

10 Principios de los Maestros de CSS

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Cuando se trata de CSS, hay un montón de recursos y supuestos "consejos de expertos" en la web. Estos vienen de "gurús" autoproclamados no verificados que no tienen credibilidad callejera en el mundo del diseño. Si bien pueden tener puntos válidos, ¿cómo saber si un consejo CSS es un recurso válido o simplemente un hack no probado?

En lugar de confiar en fuentes desconocidas para asesorarnos, vamos a mirar profundamente a los diseñadores que tienen excelentes antecedentes de diseño y han transitado el camino. Estos consejos CSS se recogen de algunos de los diseñadores más respetados del planeta. Ellos tienen los portafolios para respaldar sus consejos, por lo que usted sabrá que cada bocado de asesoramiento es de la más alta calidad.

Debajo hay 10 excelentes principios que cualquier desarrollador o diseñador web puede encontrar útiles, significativos o desafiantes. Considere este sabio consejo de los jornaleros (y jornaleras) que han recorrido el camino largo y duro de la excelencia del diseño. Estos son los verdaderos maestros de CSS. Beba profundamente de su conocimiento y tome su sabiduría en su próxima aventura de diseño.


1. Mantenga el CSS simple - Peter-Paul Koch

Lo que más me molesta de la mentalidad de los hackers de CSS es que están activamente buscando soluciones complicadas. Busquen y serán hallados, si usted quiere complejidad, ésta lo tomará por la garganta. Nunca lo soltará, y tampoco le ayudará.

Peter-Paul Koch es un padrino del desarrollo web. Si bien es un desarrollador de la vieja escuela y la mayor parte de su portafolio web estuvo entre 1998-2002, ha trabajado para Apple y otros pesos pesados. Él ha escrito un libro sobre javascript, pero ni por un segundo piense que no tiene nada que decir acerca de CSS.

El peligro de los hacks de CSS

Koch ha enfatizado en algo que cada diseñador y desarrollador web debe seguir con celo: Mantenga su CSS simple. La simplicidad es una cosa difícil de lograr, especialmente en el diseño CSS. Hay una gran cantidad de hacks CSS que uno puede encontrar para hacer que todos los navegadores se vean iguales, independientemente de la versión o el tipo. Sin embargo, hay un defecto fundamental con el uso de muchos hacks CSS. A medida que evolucionan los navegadores web, es mucho más difícil mantenerse al día con los cambios.

Koch tiene un punto interesante sobre el desarrollo de la web. El Internet en su conjunto es un lugar bastante impredecible, y tratar de adivinar la forma en que funcionará en el futuro es una muy mala estrategia.

La Web es un lugar incierto. Usted nunca estará seguro de que sus sitios web funcionarán de la forma exacta en que quiere que funcionen, ni siquiera cuando aplique todas las ideas modernas de CSS, accesibilidad y usabilidad. En lugar de buscar la falsa comodidad con hacks que parecen más cómodos debido a su complejidad, debe aceptar la incertidumbre como un principio básico.

Los navegadores no tienen un soporte CSS perfecto; especialmente para las personas que han empezado a aprender CSS, eso puede ser irritante. Sin embargo los hacks de CSS no son la solución. La aceptación de la forma en que la Web funciona actualmente es la mejor manera de actuar porque mantendrá sus sitios sencillos.

Peter-Paul ha dado con algo que suena verdadero no sólo para CSS, sino para el desarrollo web como un todo. La simplicidad es clave para la eficiencia en la codificación.


2. Mantenga las declaraciones CSS en una sola línea - Jonathan Snook

Jonathan Snook es un diseñador increíblemente popular de Ottawa, Canadá, que ha hecho su nombre en estándares web y diseño. Ha hablado en prestigiosas conferencias como SXSW y ha publicado varios recursos técnicos sobre diseño a través de Sitepoint.

Uno de los principios de Jonathan para codificar CSS es mantener las declaraciones en una sola línea.

El segundo puede parecer más bonito, pero con seguridad no me ayuda a encontrar nada. Al buscar algo en una hoja de estilos, lo más importante es el conjunto de reglas (que es la parte antes de la { y } ). 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 usted simplemente ve más en una página. Una vez que he encontrado el conjunto de reglas que estaba buscando, encontrar la propiedad que quiero es generalmente sencillo ya que rara vez son tantas.

Jonathan proporciona un ejemplo para declaraciones de línea única 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;
}

Este enfoque no solo ayuda a escanear rápidamente su CSS, sino que también ayuda a mantener su archivo CSS más pequeño eliminando espacios y caracteres innecesarios.


3. Utilizar abreviaturas CSS - Roger Johansson

La mayoría de las personas conocen y utilizan algunas abreviaturas, pero muchos no hacen pleno uso de estas propiedades de ahorro de espacio.

Roger Johansson sabe una cosa o dos sobre el diseño para la web. El diseñador web sueco ha estado trabajando en Internet desde 1994, y tiene un popular blog de diseño web.  Cuando se trata de soluciones sencillas y elegantes, Roger es uno de los más conocedores en su campo.

Johansson tiene un artículo en el que profundiza sobre la importancia de las abreviaturas CSS, y da muchos ejemplos de cómo usarlas mientras codifica CSS. Aquí un ejemplo:

El uso de las abreviaturas para estas propiedades puede ahorrar mucho espacio. Por ejemplo, para especificar diferentes márgenes para todos los lados de una caja, usted podría utilizar 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 utiliza para la propiedad de relleno.

Mientras que las abreviaturas CSS reducen el tamaño de la hoja de estilos, también ayudan a organizar y mantener el código simple. CSS bonito es CSS simple.


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

El Sr. Snook tiene otro fragmento de consejo crucial con el que cada desarrollador web debe convivir: permita que los elementos de bloque llenen el espacio de manera orgánica. Si hay un tema recurrente en el desarrollo de CSS, es para no obligar al código a hacer cosas para las que no está destinado. Esto significa evitar hacks CSS y encontrar la solución más sencilla posible.

Mi regla general es, si establezco un ancho, no establezco margen o relleno. Del mismo modo, si estoy estableciendo un margen o relleno, no establezco un ancho. Tratar con el modelo de caja puede ser un dolor, especialmente si se trata de porcentajes. Por lo tanto, establezco el ancho de los contenedores y a continuación establezco margen y relleno en los elementos dentro de ellos. Todo generalmente resulta sin problemas.

La regla de oro de Jonathan es excelente para asegurar que sus diseños no se rompan y que el enfoque más sencillo se use al crear diseños con elementos de bloque.


5. Establezca un float para despejar un float - Trevor Davis

Flotar es probablemente una de las cosas más importantes que se deben entender con CSS, pero saber cómo limpiar floats es necesario también.

Trevor Davis puede no ser un nombre tan grande como Zeldman o Snook en el mundo del diseño, pero sin duda merece una mención basada en su excelente portafolio de diseños web. Su blog es un excelente recurso para cualquier desarrollador web que quiera retocar sus fragmentos de diseño.

Limpiar floats

En el artículo insignia de Trevor Las 6 Técnicas Más Importantes de CSS que Usted Necesita Saber, agregó un fragmento dorado que puede ahorrar muchos dolores de cabeza al usar columnas en sus diseños.

He creado una página simple con dos columnas flotantes una al lado de otra. Usted observará en el ejemplo que el fondo gris no contiene las columnas flotantes. Por lo tanto, lo que más fácil se puede hacer es establecer el elemento contenedor como float. Pero ahora, verá que el fondo del contenedor no contiene el área de contenido.

Dado que el contenedor tiene margin: 0 auto, no lo queremos flotar porque lo moverá a cualquier lado que lo flotemos. Así que otra manera de limpiar el float, es insertar un elemento de limpieza. En este caso, sólo uso un conjunto div vacío para clear: both. Ahora, hay otras maneras de limpiar un float sin marcado, pero he notado algunas inconsistencias con esa técnica, así que simplemente sacrifico un div vacío.


6. Utilice márgenes negativos - Dan Cederholm

A veces es más fácil lidiar con la excepción a la regla, en vez de agregar declaraciones para todos los demás elementos alrededor de ella.

La compañía de Dan Cederholm SimpleBits es una potencia entre las compañías 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 entrega algunos de los conocimientos que ha obtenido trabajando con estos nombres masivos en su blog en SimpleBits. Aquí hay una regla de oro para ustedes diseñadores y desarrolladores web: Dan Cederholm dice algo, ustedes escuchan. Piense en él como en un sherpa digital, guiándole a la cresta de su montaña del diseño.

Márgenes negativos

Si bien puede parecer contraintuitivo poner un negativo frente a cualquier declaración (como el margin-left: -5px), en realidad es una buena idea. El Sr. Cederholm explica que el uso de márgenes negativos en los elementos es a veces más fácil que tener que cambiar cada aspecto adicional del diseño para hacer que se alinee de la manera que usted desea.

Hay situaciones en las que el uso de márgenes negativos en un elemento puede ser la forma más fácil de "desplazarlo" del resto, tratando la excepción a la regla con el fin de simplificar el código.

Usted puede ver su ejemplo del uso correcto del margen negativo aquí.


7. Utilice CSS para centrar diseños - Dan Cederholm

"¿Cómo puedo centrar un diseño de ancho fijo usando CSS?" Para los que lo saben, es simple. Para los que no, encontrar las dos reglas necesarias para completar el trabajo puede ser frustrante.

No es ninguna sorpresa que Dan va a aparecer en esta lista dos veces. Los diseños centrados son en la superficie una idea muy simple, pero por alguna razón no siempre funcionan tan fácilmente como se anuncia. Centrar diseños con CSS puede ser un esfuerzo frustrante para un principiante si nunca lo ha probado antes.

Dan tiene un método probado y verdadero que utiliza con frecuencia para lograr el nirvana de diseño centrado.

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

Muchos diseños modernos se basan en diseños centrados, por lo que utilizar este método en algún momento será muy útil para desarrolladores y diseñadores web.


8. Utilice el DOCTYPE correcto - Jeffrey Zeldman

Usted ha escrito XHTML y CSS válidos. Ha utilizado el Modelo de objetos de documento (DOM) estándar del W3C para manipular elementos dinámincos de página. Sin embargo, en los navegadores diseñados para soportar estos estándares, su sitio está fallando. Un DOCTYPE defectuoso probablemente tiene la culpa.

Jeffrey Zeldman es uno de los cofundadores del excelente sitio de recursos A List Apart, cofundó y dirigió The Web Standards Project, dirige el estudio de diseño Happy Cog e incluso escribió el libro sobre diseño para estándares web. En resumen, Zeldman está en el escalafón superior de los diseñadores web.

Malentendido de DOCTYPE

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

Usar un DOCTYPE incompleto o anticuado -o ningún DOCTYPE en absoluto- envía estos mismos navegadores al modo "Quirks", donde el navegador asume que usted ha escrito lenguaje de marcado y código anticuados e inválidos de acuerdo a las deprimentes normas de la industria de finales de los años noventa.

Zeldman hace hincapié en la importancia de a) utilizar un DOCTYPE, y señala que usted tiene que agregar una url en la declaración de esta forma:

Si está encontrando problemas inexplicables con sus diseños, las probabilidades son que el DOCTYPE podría ser el problema.


9. Centrar Elementos con CSS - Wolfgang Bartelme

Centrar elementos es una tarea frecuente al diseñar sitios web. Pero para las personas nuevas en CSS, es por lo general un enigma cómo centrar por ejemplo todo un sitio web en otros navegadores que no sean IE.

Wolfgang Bartelme es un diseñador web de Bartelme design, una empresa de diseño web. Bartelme tiene uno de los blogs más elegantemente diseñados, y crea continuamente excelentes trabajos de íconos y de diseño. Ha hecho el trabajo de diseño para la plataforma de blogs Squarespace, así como el popular evento de software MacHeist.

Wolfgang ha creado un tutorial que ayuda con la complicada tarea de centrar elementos con CSS. Los elementos centrados son increíblemente útiles, pero a veces son difíciles de lograr dado el diseño. El tutorial de Bartelme garantiza la alineación centrada eligiendo el DOCTYPE correcto y añadiendo su vudú CSS. El código no es extravagante y realiza el trabajo, y cae directamente en línea con el esfuerzo por la simplicidad en el CSS.


10. Utilice comandos text-transform - Trenton Moss

Trenton Moss sabe acerca de usabilidad en la web. Él tiene su propia compañía de usabilidad web que proporciona a la gente entrenamiento en usabilidad y escritura web. También escribe para sitios como Sitepoint. Trenton ofrece excelentes consejos basados ​​en su experiencia como experto en usabilidad en la web.

Es un hecho simple que los diseños cambian con el tiempo, especialmente en la forma en que el texto se muestra en los sitios web. Lo mejor que un diseñador web puede hacer es planear para el futuro para asegurarse de que en lugar de tener que cambiar manualmente la forma en que se muestra el texto, lo mejor sea utilizar CSS para cambiar la apariencia del texto. Trenton Moss nos muestra cómo lograr esto a través del uso de un comando CSS simple y subutilizado llamado text-transfom.

Uno de los comandos CSS menos conocidos pero realmente útiles es el text-transform. Tres de los valores más comunes para esta regla son: text-transform: uppercase, text-transform: lowercase y text-transform: capitalize. La primera regla convierte todos los caracteres en mayúsculas, el segundo los convierte en letras minúsculas y el tercero hace que la primera letra de cada palabra sea mayúscula.

Usando CSS para mostrar la apariencia del texto en el sitio, permite cambios en el futuro y mantiene las cosas consistentes a lo largo del tiempo.

Este comando es increíblemente útil para ayudar a garantizar la consistencia en el estilo en todo un sitio web, particularmente si tiene varios editores de contenido. Digamos, por ejemplo, que su guía de estilo dicta que las palabras en los encabezados siempre deben comenzar con letras mayúsculas. Para asegurarse de que este siempre sea el caso, utilice text-transform: capitalize. Incluso si los editores del sitio se olvidan de la capitalización, su error no aparecerá en el sitio web.

Mientras que la transformación de texto es una pequeña cosa para añadir a un diseño CSS, puede hacer una gran diferencia en el futuro cuando deban hacerse cambios.

  • Suscríbete al Canal RSS de NETTUTS para obtener a diario más tutoriales y artículos sobre desarrollo web.

Glen Stansberry es un desarrollador web y blogger que ha luchado más veces de lo que él desea admitir con CSS. Usted puede leer más consejos sobre desarrollo web en su blog Web Jackalope.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.