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
15 jul 2019

Desarrollamos una web para facilitar labores de emergencia

Un portal web desarrollado por Ticmedia facilitará las labores de los servicios de emergencia ante un siniestro en un polígono industrial

11 abr 2019

Galardonada una web desarrollada por Ticmedia

Una web desarrollada por Ticmedia ha sido galardonada con el premio a la mejor web de Asturias

programación web :: ticmedia.es
Fondo Social Europeo
Servicio Público de empleo

Ticmedia Soluciones profesionales S.L es beneficiaria de una subvención cofinanciada por el Principado de Asturias, el Fondo Social Europeo y la Iniciativa de Empleo Juvenil (en el marco del Programa Operativo de Empleo Juvenil 2014-2020) por la celebración de contratos en prácticas