compartimos
la actualidad contigo

30 dic 2008

Guía de creación de código CSS

Normas para llevar un trabajo ordenado y mejorar nuestra productividad Organización de los archivos Para mejorar los cambios de diseño y forma sin afectar otras áreas, dividimos en varias básicas todos nuestros estilos. formato_de_plantilla.css: Todo lo relacionado con posicionamiento, plantilla del diseño, etc. Exclusivamente. archivo.css: Todo lo relacionado con un archivo en particular funcionalidad.css. Todo lo relacionado con funcionalidades detalladas (galerías de fotos, ajax...)

Normas para llevar un trabajo ordenado y mejorar nuestra productividad

Organización de los archivos

Para mejorar los cambios de diseño y forma sin afectar otras áreas, dividimos en varias básicas todos nuestros estilos.

formato_de_plantilla.css: Todo lo relacionado con posicionamiento, plantilla del diseño, etc. Exclusivamente. archivo.css: Todo lo relacionado con un archivo en particular funcionalidad.css. Todo lo relacionado con funcionalidades detalladas (galerías de fotos, ajax...)

Dentro del CSS Orden de escritura Dentro de los archivos CSS podemos colocar estilos para etiquetas, para identificadores, para clases, así como ciertos casos especiales. Debemos tener cuidado si utilizamos sistemas de creación de .CSS (dreamweaver...) para que siempre respetemos el orden aquí definido. Colocaremos los estilos en este orden Etiquetas (Tags de HTML) Clases Capas y formatos A su vez, estos los organizaremos en la medida de los posible por orden alfabético y con sepadores de formatos body { background: #ffffff; /* fondo de toda la página */ } /*------------------------------------------------------*/ .boton { color:#f2f2f2 } /*------------------------------------------------------*/ /* formato del menú */ /*------------------------------------------------------*/ #menuh { margin-top: 5px; /* aire por arriba del menú hasta el logo */ margin-bottom: 15px; /* aire por abajo del menú hasta el logo */ font-family: "Trebuchet MS", Verdana; /* tipo letra */ font-size: 1.2em; /* tamaño en relativo */ clear:both; /* para que no pise con los float */ padding-left: 480px; /* para pegarlo por la derecha */ text-transform: uppercase; font-weight: bold; } /*------------------------------------------------------*/ Comentarios Los comentarios para que nos enteremos el porqué se han introducido algunos valores son imprescindibles, más si son debidos a hacks. .inferior { clear: both; } /*  evitar superposicion de capas */ Tabs o Espacios En el contenido dentro de corchetes, siempre se identará con un mismo número de espacios o preferentemente tabs. .titulo {   color: #0000FF;   margin: 10px } Nombres de etiquetas, identificadores y clases Los nombres de etiqueta son en minúsculas sin tildes o caracteres especiales ( como todos los demás nombres). Para los identificadores o clases con más de dos palabras, estas serán separadas con underscore “_”. Los nombres deben ser descriptivos, es preferible que sean un poco más largos, pero que se entienda con sólo leer el nombre para que sirve: body {} #cabecero_titulo {} .enlace_del_pie {} Corchetes o llaves. Donde colocarlas Pueden ser usados en línea completa o separados si los .CSS van en multilinea. .fondo { background: none; } .titulo { color: #0000FF; } Espacios después de signos Es algo muy sencillo que puede ayudar de gran manera en la lectura del código. Siempre hay que tener un espacio después de las comas, los signos de dos puntos, etc. .fondo, .titulo { background: none; color: #05F1F2; } Documentación de hacks CUALQUIER hack (truco o mecanismo que usamos para que las páginas funcionen correctamente en todos los navegadores, por ejemplo en el Internet Explorer) , debe documentarse. Debemos evitar el uso de hacks y de cualquier código poco límpio. .info { line-height:12px ¡important; /* Esto para que funcione en IE */ }Dentro del CSS

Orden de escritura
Dentro de los archivos CSS podemos colocar estilos para etiquetas, para identificadores, para clases, así como ciertos casos especiales. Debemos tener cuidado si utilizamos sistemas de creación de .CSS (dreamweaver...) para que siempre respetemos el orden aquí definido.

Colocaremos los estilos en este orden

Etiquetas (Tags de HTML) Clases Capas y formatos

A su vez, estos los organizaremos en la medida de los posible por orden alfabético y con sepadores de formatos

body { background: #ffffff; /* fondo de toda la página */ } /*------------------------------------------------------*/ .boton { color:#f2f2f2 } /*------------------------------------------------------*/ /* formato del menú */ /*------------------------------------------------------*/ #menuh { margin-top: 5px; /* aire por arriba del menú hasta el logo */ margin-bottom: 15px; /* aire por abajo del menú hasta el logo */ font-family: "Trebuchet MS", Verdana; /* tipo letra */ font-size: 1.2em; /* tamaño en relativo */ clear:both; /* para que no pise con los float */ padding-left: 480px; /* para pegarlo por la derecha */ text-transform: uppercase; font-weight: bold; } /*------------------------------------------------------*/

Comentarios
Los comentarios para que nos enteremos el porqué se han introducido algunos valores son imprescindibles, más si son debidos a hacks.

.inferior { clear: both; } /*  evitar superposicion de capas */

Tabs o Espacios
En el contenido dentro de corchetes, siempre se identará con un mismo número de espacios o preferentemente tabs.

.titulo {   color: #0000FF;   margin: 10px }

Nombres de etiquetas, identificadores y clases
Los nombres de etiqueta son en minúsculas sin tildes o caracteres especiales ( como todos los demás nombres). Para los identificadores o clases con más de dos palabras, estas serán separadas con underscore “_”.

Los nombres deben ser descriptivos, es preferible que sean un poco más largos, pero que se entienda con sólo leer el nombre para que sirve:

body {} #cabecero_titulo {} .enlace_del_pie {}

Corchetes o llaves. Donde colocarlas
Pueden ser usados en línea completa o separados si los .CSS van en multilinea.

.fondo { background: none; } .titulo { color: #0000FF; }

Espacios después de signos
Es algo muy sencillo que puede ayudar de gran manera en la lectura del código. Siempre hay que tener un espacio después de las comas, los signos de dos puntos, etc.

.fondo, .titulo { background: none; color: #05F1F2; }

Documentación de hacks
CUALQUIER hack (truco o mecanismo que usamos para que las páginas funcionen correctamente en todos los navegadores, por ejemplo en el Internet Explorer) , debe documentarse. Debemos evitar el uso de hacks y de cualquier código poco límpio.

.info { line-height:12px ¡important; /* Esto para que funcione en IE */ }
Otras noticias
20 jul 2018

Google ha cambiado sus políticas de posicionamiento y Google Maps

Recientemente Google ha empezado a modificar tanto las políticas de algunos de sus productos como Google Maps como los algoritmos de su buscador. Te contamos en que consiste y como afecta a tu sitio web.

12 jun 2018

Ticmedia consigue uno de los primeros 4 certificados de DPD en España

Los cuatro primeros Delegados de Protección de Datos (DPD o DPO en inglés) certificados de España ya tienen su acreditación de AENOR tras la prueba realizada el pasado 28 de mayo, prueba a la que sólo accedieron las personas que reunían los pre-requisitos necesarios de experiencia y/o formación. La certificación acredita los conocimientos de los DPD conforme al Esquema de Certificaciónde Delegados de Protección de Datos de la Agencia Española de Protección de Datos.

Estamos muy orgullosos de  poder decir que, nuestra especialista en protección de datos personales, Rocío Lozano, ha conseguido una de esas primeras 4 certifcaciones, que nos convierte en pioneros en el sector de la consultoría y asesoría en materia de protección de datos personales.