Share
Cuando se trata de CSS, hay muchos recursos y supuestos "consejos de expertos" en la web. Estos son de "gurús" autoproclamados y no probados que no tienen credibilidad callejera en el mundo del diseño. Si bien pueden tener puntos válidos, ¿cómo saber si una sugerencia de CSS es un recurso válido o solo un truco no probado??
En lugar de confiar en fuentes desconocidas para obtener consejos, analicemos en profundidad a los diseñadores que tienen excelentes antecedentes de diseño y que han caminado por el camino. Estos consejos sobre CSS están recopilados por algunos de los diseñadores más respetados del planeta. Tienen las carteras para respaldar sus consejos, por lo que sabrá que cada consejo es de la más alta calidad..
A continuación hay 10 principios excelentes que cualquier desarrollador o diseñador web puede encontrar útil, significativo o desafiante. Considere este sabio consejo de los viajeros (y mujeres) que han recorrido el largo y duro camino de la excelencia en el diseño. Estos son los cierto Maestros de CSS. Beba profundamente de su conocimiento y su sabiduría en su próxima aventura de diseño..
Lo que más me molesta de la mentalidad de los hackers de CSS es que están buscando activamente soluciones complicadas. Busca y serás encontrado, si quieres complejidad te llevará por la garganta. Nunca te dejará ir, y tampoco te 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 cartera web fue entre 1998 y 2002, trabajó con gente como Apple y otros pesos pesados. Ha escrito un libro en javascript, pero no pienses por un segundo que no tiene nada que decir sobre CSS.
Koch ha abordado algo que cada diseñador y desarrollador web deben seguirlo con celo: mantén tu CSS simple. La simplicidad es algo difícil de lograr, especialmente en el diseño de CSS. Hay una gran cantidad de hacks CSS que se pueden encontrar para hacer que todos los navegadores tengan el mismo aspecto, independientemente de la versión o el tipo. Sin embargo, hay un defecto fundamental con el uso de muchos hacks CSS. A medida que los navegadores web evolucionan, es mucho más difícil mantenerse al día con los cambios.
Koch hace un punto interesante sobre el desarrollo para la web. La Internet en su conjunto es un lugar muy impredecible, y tratar de adivinar la forma en que funcionará en el futuro es una estrategia muy mala..
La web es un lugar incierto. Nunca se asegurará de que sus sitios web funcionarán de la manera exacta en que desea que funcionen, ni siquiera cuando aplique todas las perspectivas modernas de CSS, accesibilidad y usabilidad. En lugar de buscar una falsa comodidad en hacks que parecen más cómodos debido a su complejidad, debes aceptar la incertidumbre como un principio básico..
Los navegadores no tienen soporte CSS perfecto; especialmente para las personas que acaban de comenzar a aprender CSS, eso puede ser exasperante. No obstante, los hacks CSS no son la solución. Aceptar la forma en que funciona actualmente la Web es la mejor manera de hacerlo porque mantendrá sus sitios simples.
Peter-Paul ha acertado en algo que suena no solo para CSS, sino para el desarrollo web en general.. La simplicidad es clave para la eficiencia en la codificación..
Jonathan Snook es un diseñador increíblemente popular de Ottawa, Canadá, que se hizo famoso en estándares y diseño web. 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 inquilinos de Jonathan en la codificación de CSS es mantener las declaraciones en una línea..
El segundo puede parecer más bonito pero seguro que no me ayuda a encontrar nada. Cuando se busca algo en una hoja de estilo, lo más importante es el conjunto de reglas (esa es la parte anterior a 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 simplemente verá 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 bastante sencillo ya que rara vez hay tantos.
Jonathan continúa dando un ejemplo para declaraciones de una sola línea que se parecen a esto:
Bueno
font-size: 18px; borde: 1px azul sólido; color: # 000; color de fondo: #FFF;
Malo
h2
tamaño de fuente: 18px;
borde: 1px azul sólido;
color: # 000;
color de fondo: #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 al eliminar espacios y caracteres innecesarios..
La mayoría de las personas conocen y utilizan algunos métodos abreviados, pero muchos no hacen un uso completo de estas propiedades para ahorrar 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 simples y elegantes, Roger es uno de los más expertos en su campo..
Johansson tiene un artículo muy detallado sobre la importancia de la abreviatura de CSS, y da algunos ejemplos de cómo usarlo al codificar CSS. Aquí hay un ejemplo:
Usar la taquigrafía para estas propiedades puede ahorrar mucho espacio. Por ejemplo, para especificar diferentes márgenes para todos los lados de un cuadro, puede usar esto:
margen superior: 1em;
margen derecho: 0;
margen inferior: 2em;
margen izquierdo: 0.5em;
Pero esto es mucho más eficiente:
margen: 1em 0 2em 0.5em;La misma sintaxis se usa para la propiedad de relleno.
Si bien la abreviatura de CSS reduce el tamaño de la hoja de estilo, también ayuda a organizar y mantener el código simple. Beautiful CSS es CSS simple.
El Sr. Snook tiene otro consejo crucial que todo desarrollador web debe seguir: permitir que los elementos de bloque ocupen un espacio orgánico. Si hay un tema recurrente en el desarrollo de CSS, es no forzar al código a hacer cosas para las que no está destinado. Esto significa evitar los hacks CSS y encontrar la solución más simple posible..
Mi regla de oro es que, si configuro un ancho, no configuro el margen o el relleno. Del mismo modo, si estoy configurando 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 en los contenedores y luego configuro el margen y el relleno en los elementos dentro de ellos. Todo suele salir a la deriva..
La regla de oro de Jonathan es excelente para garantizar que sus diseños no se rompan y que se utilice el enfoque más sencillo al crear diseños con elementos de bloque.
La flotación es probablemente una de las cosas más importantes para entender con CSS, pero también es necesario saber cómo borrar flotantes.
Es posible que Trevor Davis no sea un nombre tan grande como Zeldman o Snook en el mundo del diseño, seguramente merece alguna mención solo por su excelente portafolio de diseños web. Su blog es un excelente recurso para cualquier desarrollador web que desee repasar sus habilidades de diseño..
En el artículo emblemático de Trevor, las 6 técnicas CSS más importantes que debe conocer, ha agregado un nugget que puede ahorrar muchos dolores de cabeza al utilizar columnas en sus diseños..
He creado una página simple con dos columnas flotantes una al lado de la otra. Notará en el ejemplo que el fondo gris no contiene las columnas flotantes. Por lo tanto, lo más fácil es configurar el elemento contenedor para que flote. Pero ahora, verá que el fondo del contenedor no contiene el área de contenido.
Dado que el contenedor tiene margen: 0 auto, no queremos flotarlo porque lo moverá a cualquier lado que lo flotemos. Así que otra forma de despejar el flotador, es insertar un elemento de compensación. En este caso, solo uso un conjunto de div vacío para borrar: ambos. Ahora, hay otras formas de despejar un flotador sin marcas, pero he notado algunas inconsistencias con esa técnica, así que solo sacrifico un div vacío.
A veces es más fácil lidiar con la excepción a la regla, en lugar de agregar declaraciones para todos los demás elementos a su alrededor.
La compañía de Dan Cederholm, SimpleBits, es una potencia de una compañía de diseño. Dan trabajó con gente como:
... y muchas otras compañías web de alto perfil. Afortunadamente, Dan transmite parte de los conocimientos que ha aprendido trabajando con estos nombres masivos en su blog en SimpleBits. Aquí hay una regla de oro para sus diseñadores y desarrolladores web: Si Dan Cederholm dice algo, escucha.. Piense en él como un sherpa digital, guiándole a la cima de su montaña de diseño.
Si bien puede parecer contrario a la intuición poner un negativo frente a cualquier declaración (como margin-left: -5px), en realidad es una buena idea. El Sr. Cedarholm explica que el uso de márgenes negativos en los elementos a veces es más fácil que tener que cambiar todos los demás aspectos del diseño para alinearlos de la manera que desee..
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, considerando la excepción a la regla para simplificar el código..
Puedes ver su ejemplo de uso apropiado del margen negativo aquí.
"¿Cómo centrar un diseño de ancho fijo usando CSS?" Para los que saben, es simple. Para aquellos que no lo hacen, encontrar las dos reglas necesarias para completar el trabajo puede ser frustrante.
No es de extrañar que Dan vaya a hacer 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 lo anuncian. Centrar diseños con CSS puede ser un esfuerzo frustrante para un principiante si nunca lo han intentado antes.
Dan tiene un método probado y verdadero que usa con frecuencia para lograr un nirvana de diseño centrado.
#envase
margen: 0 auto;
ancho: xxxpx;
alineación de texto: izquierda;
Muchos diseños modernos se basan en diseños centrados, por lo que el uso de este método en algún momento será útil para los desarrolladores y diseñadores web.
Has escrito XHTML y CSS válidos. Ha utilizado el Modelo de objetos de documento (DOM) estándar de W3C para manipular elementos de página dinámicos. Sin embargo, en los navegadores diseñados para soportar estos mismos estándares, su sitio está fallando. Un DOCTYPE defectuoso es probable que culpe.
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ó la Libro sobre diseño para estándares web. En resumen, Zeldman está en el escalón superior de los diseñadores web..
El DOCTYPE de una página web es uno de los aspectos más ignorados del diseño. Usar el DOCTYPE correcto es crucial, y Zeldman explica por qué.
Usar un DOCTYPE incompleto o desactualizado, o ningún DOCTYPE en todos los casos, arroja estos mismos navegadores en el modo "Quirks", en el que el navegador asume que ha escrito un código y un código no válidos pasados de moda según las normas deprimentes de la industria de finales de los 90.
Zeldman enfatiza la importancia de a) usar un DOCTYPE, y señala que debe agregar una url en la declaración de esta manera:
Si encuentra problemas inexplicables con sus diseños, las probabilidades son que el DOCTYPE podría ser el problema.
Centrar elementos es una tarea frecuente al diseñar sitios web. Pero para las personas que son nuevas en CSS, es principalmente una especie de enigma cómo centrar, por ejemplo, un sitio web completo en navegadores que no sean IE.
Wolfgang Bartelme es un diseñador web con Bartelme design, una firma de diseño web. Bartelme tiene uno de los blogs de diseño más elegante y crea continuamente excelentes iconos y trabajos de diseño. Ha realizado trabajos de diseño para la plataforma de blogs Squarespace, así como para el popular evento de software MacHeist..
Wolfgang ha creado un tutorial que ayuda con la complicada tarea de centrar los 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 asegura una alineación centrada al elegir el DOCTYPE correcto y al agregar su vudú CSS. El código no es lujoso y hace el trabajo, y se ajusta directamente a la simplicidad en CSS.
Trenton Moss conoce la usabilidad web. Él tiene su propia empresa de usabilidad web que capacita a las personas en capacitación de usabilidad y redacción web. También escribe para sitios como Sitepoint. Trenton ofrece excelentes consejos basados en su experiencia como experto en usabilidad web..
Es un hecho simple que los diseños cambian con el tiempo, especialmente en la forma en que se muestra el texto en los sitios web. Lo mejor que puede hacer un diseñador web es planear el futuro para asegurarse de que, en lugar de tener que cambiar manualmente la forma en que se muestra el texto, es mejor usar CSS para cambiar la apariencia del texto. Trenton Moss nos muestra cómo lograrlo mediante el uso de un comando CSS simple, infrautilizado, llamado text-transfom.
Uno de los comandos CSS menos conocidos, pero realmente útiles, es el comando de transformación de texto. Tres de los valores más comunes para esta regla son: transformar texto: mayúsculas, transformar texto: minúsculas y transformar texto: usar mayúsculas. La primera regla convierte todos los caracteres en letras mayúsculas, la segunda los convierte en letras minúsculas y la tercera hace que la primera letra de cada palabra sea una letra mayúscula..
Al usar CSS para mostrar la apariencia del texto en el sitio, permite cambios en el futuro y mantiene las cosas constantes a lo largo del tiempo.
Este comando es increíblemente útil para ayudar a garantizar la coherencia en el estilo en todo un sitio web, especialmente 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 mayúsculas. Para asegurarse de que este sea siempre el caso, use text-transform: capitalize. Incluso si los editores del sitio se olvidan de la capitalización, su error no aparecerá en el sitio web.
Si bien la transformación de texto es una pequeña cosa para agregar a un diseño css, puede hacer una gran diferencia en el futuro cuando se deben hacer cambios..
Glen Stansberry es un desarrollador web y bloguero que ha luchado más veces de lo que desea admitir con CSS. Puedes leer más consejos sobre desarrollo web en su blog Web Jackalope..
Accentsconagua