Bloguero-ec

Codigo Fuente, programación, Diseño Web

Tips y trucos para CSS..

agosto 30, 2016
codigo-fuente,css,css3,framework


Etiquetas: , ,


En esta publicación  compartiremos  con ustedes una colección de tips , trucos útiles y mejores prácticas que se recomiendan por la comunidad CSS. Algunos se adapta más a los principiantes, y algunos son un poco avanzado, Esperemos que los disfruten al máximo.

1.- Margin Collapse..

A diferencia de la mayoría de otras propiedades, los márgenes verticales se cierran cuando se encuentran. Lo que esto significa es que cuando el margen inferior de un elemento se tope con el margen superior de otro, sólo el más grande de los dos sobrevive. Aquí está un ejemplo sencillo:

[codepen_embed height=”265″ theme_id=”light” slug_hash=”jrNkYj” default_tab=”css,result” user=”bloguero”]See the Pen jrNkYj by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

En lugar de 70 píxeles entre el cuadrado rojo y negro sólo tenemos 40px, el margen del cuadrado negro no se tiene en cuenta en absoluto. Hay maneras para luchar contra este comportamiento, pero es mejor simplemente trabajar con él y utilizar solamente los márgenes que van en una dirección, preferentemente  margin-bottom.

2.- Utilice Flexbox para el diseño

El diseño Flexbox existe por una razón inline-blocks y Floats , pero estas herramientas son escencialmente para hojas de estilo, no páginas web. Flexbox por el contrario se ha diseñado específicamente para que sea fácil de crear cualquier diseño exactamente la forma en que fue creado.

El conjunto de propiedades que vienen con el modelo Flexbox da a los desarrolladores una gran flexibilidad (sin doble sentido), y una vez que se acostumbre a ellos, hacer cualquier diseño es pan comido. La compatibilidad con exploradores hoy en día es casi perfecta, por lo que no debería haber nada que nos impida trabajar con Flexbox .

.container {
    display: flex;
    /* Safari */
    display: -webkit-flex;
}

3.- Resetear el estilo CSS

Aunque la situación ha mejorado mucho en los últimos años, todavía hay un montón de variación en la forma en que se comportan los diferentes navegadores. La mejor manera de resolver este problema es aplicar un reset CSS que establece valores por defecto universales para todos los elementos, lo que le permite empezar a trabajar en una hoja de estilo limpia que producirá el mismo resultado en todas partes.

Hay bibliotecas como normalize.css, minireset , y ress que hacen muy bien el trabajo . Si no desea utilizar una biblioteca, se puede hacer un CSS muy básico:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

4.- Border-box

La mayoría de los principiantes no saben acerca de la propiedad  box-sizing , pero en realidad es bastante importante. La mejor manera de entender lo que hace es mirar a sus dos valores posibles:

  • content-box(por defecto) – Cuando establecemos un width/Height a un elemento, que es sólo el tamaño de su contenido. Todos los padding y los bordes están por encima de eso. Por ejemplo, una <div> tiene una anchura de 100 y el relleno de 10, nuestro elemento ocupará 120 píxeles (100 + 2 * 10).
  • border-box– El padding y el borde se incluyen en el width/height . Una <div>con width: 100px;y box-sizing: border-box; será de 100 píxeles de ancho, sin importar los padding o border que se añadan.

Ajustar border-box a todos los elementos hace que sea mucho más fácil de arreglar todo, ya que no tiene que hacer calculos todo el tiempo.

 

5.- Imágenes como Background

Al añadir imágenes a su diseño, especialmente si va a ser responsive, utilice una etiqueta <div> con la propiedad background CSS en lugar de elementos <img>.

Esto puede parecer más trabajo , pero en realidad hace que sea mucho más fácil de arreglar imágenes correctamente, manteniendo su tamaño original y relación de aspecto, gracias a backgorund-sizebackgorund-position y otras propiedades.

[codepen_embed height=”265″ theme_id=”light” slug_hash=”PGYQgV” default_tab=”html,result” user=”bloguero”]See the Pen PGYQgV by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

6.- Mejor border para Tablas

Las Tablas en HTML no son divertidas. Son peculiar, casi imposible de convertirse en conforme, y en general, difícil de estilizar . Por ejemplo, si desea agregar bordes simples a su tabla y sus celdas, lo más probable es acabar con esto:

[codepen_embed height=”265″ theme_id=”light” slug_hash=”ALAyWR” default_tab=”html,result” user=”bloguero”]See the Pen ALAyWR by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

Como se puede ver, hay un montón de repetición de bordes por todas partes y  no se ve bien . Aquí hay un truco de forma rápida, para eliminar todas los bordes duplicados , sólo tiene que añadir border-collapse: collapse; a la tabla.

[codepen_embed height=”265″ theme_id=”light” slug_hash=”PGYRNv” default_tab=”html,result” user=”bloguero”]See the Pen PGYRNv by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

Mucho mejor…!!

 

7.- Escribir Comentarios.

Css puede no ser un lenguaje de programación , pero necesita ser documentado con algunos comentarios para tener una hoja de estilo organizada y que sea accesible a sus colegas ..

Para secciones más grandes de la CSS como componentes principales o los media-queries , utilice un comentario estilizado y dejar un par de nuevas líneas :

/*---------------
    #Header
---------------*/
header { }

header nav { }




/*---------------
    #Slideshow
---------------*/
.slideshow { }

Los detalles en el diseño o componentes menos importantes se pueden marcar con un comentario de una sola línea.

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

Además, recuerda que el CSS no solo tiene una sola línea //comentarios, por lo que la hora de comentar algo puede que utilizar la sintaxis /* */.

/*  Correcto  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/*  No lo haga  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

8.- Uso correcto nombre de clases

Los nombres de clases y las identificaciones deben ser escritos con un guión (-) cuando contienen más de una palabra. CSS es entre mayúsculas y minúsculas por lo que NombreClase no es una buena opción.

/*  Correcto    */
.footer-column-left { }

/*  No lo haga  */
.footerColumnLeft { }

.footer_column_left { }

Cuando se trata de nombres, también puede considerar BEM , que sigue a una serie de principios que añaden consistencia y proporcionan un enfoque basado en componentes para el desarrollo. Puede leer más sobre esto en este excelente artículo de CSS-TRICKS .

9.- No repita propiedades o elementos dentro del CSS

Los valores para la mayoría de las propiedades CSS se heredan del elemento un nivel hacia arriba en el árbol DOM, de ahí el nombre de Cascading Style Sheets. Tomemos la propiedad font por ejemplo – que casi siempre se hereda del padre, usted no tiene que configurar de nuevo por separado para cada elemento de la página.

Basta con añadir los estilos de fuente que serán más frecuentes en su diseño para el <html>o <body> . Estos son algunos buenos valores por defecto:

html {
    font: normal 16px/1.4 sans-serif;
}

Más tarde, siempre se puede cambiar los estilos para cualquier elemento dado. Lo que estamos diciendo es sólo para evitar la repetición y utilizar la herencia tanto como sea posible.

10.- No lo haga usted solo Utilice alguna librería CSS

La comunidad CSS es enorme y hay constantemente nuevas bibliotecas que sirven para todo tipo de propósitos, desde diminutos fragmentos de frameworks en regla para la construcción de aplicaciones responsive. La mayoría de ellos son de código abierto .

La próxima vez que se enfrentan a un problema de CSS, antes de intentar resolverlo con todo su esfuerzo , compruebe si no hay ya una solución disponible en GitHub o CodePen .

11.- No utilice !important

Es en serio, El simple hecho que sea una solución rápida , pueden llegar a causar una gran cantidad de reescrituras en el futuro. En su lugar, busque porqué su selector CSS no está funcionando y cambielo.

El único momento en que es aceptable !important .Es cuando se desea sustituir los estilos inline del HTML, que en sí mismo es otra mala práctica que debe evitarse.

12.- Utilizando Text-transform para el bloqueo de mayusculas.

En el código HTML, escribir letras mayúsculas cuando desee utilizarlos para su significado semántico, al igual que cuando se quiere hacer hincapié en la importancia de una palabra.

<h3>Los Empleados DEBERÁN USAR Casco</h3>

Si usted necesita tener un poco de texto en mayúsculas por razones estilísticas, escribir el texto, normalmente en el HTML, y transformarla  todo en mayúsculas con CSS. Se tendrá el mismo aspecto, pero su contenido tendrá más sentido si se toma fuera de contexto.

<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
    text-transform: uppercase;
}

Lo mismo ocurre con las cadenas en minúscula  text-transform  los maneja muy bien.

13.- Em, Rem y Pixel

Hay un gran debate si las personas deben utilizar em , rem , o px  para ajustar el tamaño de los elementos y el texto. La verdad es que las tres opciones son viables y tienen sus pros y contras.

Todos los desarrolladores y proyectos son diferentes, por lo que no puede haber reglas estrictas sobre cuándo y cuál usar. Sin embargo, algunos consejos y buenas prácticas generales para cada unidad:

  • em – El valor de 1 em es relativa a la font-size de la matriz directa. A menudo se utiliza en los media-queries, em es  grande para la capacidad de respuesta, pero puede ser muy confuso una correlación entre la tasa de cambio de ems de píxeles para cada elemento (1.25em de 1.4em de 16px =?).
  • REM – En relación con el tamaño de fuente del elemento <html>, rem hace que sea muy fácil de escalar todas las líneas y párrafos en la página. Dejando el  <html> con su tamaño de fuente por defecto y el establecimiento de todo lo demás con REM es un gran acercamiento en cuanto a accesibilidad se refiere.
  • PX – Píxeles darle la más precisión, pero no ofrecen ningún ajuste cuando se utiliza en diseños sensibles. Son fiables, fáciles de entender, y presentan una buena conexión visual entre el valor y el resultado real (15px está cerca, tal vez sólo un pixel o dos más).

El fondo es, que no tenga miedo de experimentar todos ellos y ver lo que más le gusta. A veces em y rem le puede ahorrar mucho trabajo, sobre todo en la construcción de páginas responsives.

14.- Use un procesador en proyectos grandes.

Usted ha oído hablar de ellos – Sass , Less , PostCSS , Stylus . Preprocesadores son el siguiente paso en la evolución de CSS. Ellos proporcionan características tales como variables, funciones CSS, de anidación de selección, y un montón de otras cosas interesantes, por lo que el código CSS es más fácil de manejar, especialmente en grandes proyectos.

Para un ejemplo rápido, aquí es un fragmento de la utilización de variables y funciones CSS directamente en una hoja de estilo con Sass:

$accent-color: #2196F3;

a {
    padding: 10px 15px;
    background-color: $accent-color;
}

a:hover {
    background-color: darken($accent-color,10%);
}

El único inconveniente real de pre-procesadores es que necesitan ser compilados a CSS vainilla, pero si ya está utilizando un script de construcción en su proyecto esto no debería ser demasiada de una molestia.

15.- Autoprefixers para una mayor compatibilidad

Escribir prefijos específicos del navegador es una de las cosas más molestas en CSS. Ellos no son consistentes, nunca se sabe exactamente cuáles necesita, y si lo hace el proceso real de colocarlos en su hoja de estilo es una pesadilla.

Afortunadamente, existen herramientas que hace esto automáticamente por usted e incluso le permitirá decidir qué exploradores necesitan ser compatibles:

16.- Utilice codigo minificado en producción .

Para mejorar la carga de la página de sus sitios web y aplicaciones siempre se debe utilizar recursos minificados. La versión minificada de su código tendrá todos los espacios en blanco y repeticiones retirados, lo que reduce el tamaño total del archivo. Por supuesto, este proceso también hace que las hojas de estilo completamente ilegibles por lo que siempre mantenga una versión .min para la producción y una versión normal para el desarrollo.

Hay muchas maneras diferentes de Minify código CSS:

Dependiendo de su flujo de trabajo, cualquiera de las opciones anteriores se pueden utilizar, pero se recomienda para automatizar el proceso de una manera u otra.

17-. Caniuse es de gran utilidad.

Los diferentes navegadores web todavía tienen un montón de incoherencias de compatibilidad. Use canisue o un servicio similar para comprobar si lo que utiliza es compatible ampliamente, si necesita prefijos, o si causa algún error en una determinada plataforma.

Sólo la comprobación caniuse no es suficiente, sin embargo. También es necesario hacer pruebas (ya sea manualmente o por medio de un servicio) como layouts a veces se rompen sin razón aparente. El conocimiento de los navegadores preferidos de su base de usuarios también ayuda mucho, ya que se puede ver dónde está la buena ayuda es más crucial.

18.- Validar

La validación de CSS podría no ser tan importante como la validación de código HTML o JavaScript, pero el funcionamiento de su código a través de una desfibradora CSS todavía puede ser muy útil. Se le dirá si ha cometido ningún error, le advertirá sobre las malas prácticas, y darle consejos generales para mejorar el código.

Al igual que minfiers y autoprefixers, hay un montón de validadores libres disponibles:

19. Animación CSS con transform

No animar elementos cambiando directamente a su width y height, o left/top/bottom/right. Se prefiere el uso de la propiedad transform(), ya que proporciona transiciones más suaves y hace que sus intenciones sean más fácil de entender cuando se lee el código.

He aquí un ejemplo. Queremos animar una pelota y deslizarla hacia la derecha. En lugar de cambiar el valor de left, es mejor utilizar translateX():

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* No recomendado */
.ball.slide-out {
    left: 500px;
}

/* Puede solucionar probemas*/
.ball.slide-out {
    transform: translateX(450px);
}

Transform, así como todas sus muchas funciones ( translate, rotate, scale, etc.) tiene compatibilidad con los navegadores es casi universal y se puede utilizar libremente.

Espero les haya gustado esta publicación no se olviden de compartir…

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: