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
16 feb 2017

Presentación de la plataforma Areas Empresariales Gijón

Esta semana ha tenido lugar la presentación de una nueva plataforma web que facilita la búsqueda de una ubicación en nuestra ciudad. Ticmedia ha colaborado en el desarrollo de la nueva web. 

06 feb 2017

Cómo indicar en el móvil el contacto en caso de accidente.

Los sistemas de bloqueo de nuestros smartphones han cambiado todo y la iniciativa Aa que se inició en 2009 ha quedado obsoleta. ¿Cómo podemos indicar con quién contactar en esta nueva situación?