Daniel Mota / IceBeat

Mi vida en formato CSS3

Estás en la bitácora de IceBeat, una página sobre diseño y desarrollo web.

Comentarios en los CSS

Hace tiempo con Andrés nos asalto la duda de cual era la mejor implementación para escribir código CSS. Desde su punto de vista el opto por algo muy elaborado como en otro lenguajes de programación pero creo que no todos los que escriben CSS son programadores.

Todos a los que les preguntaba me decían lo mismo, no tengo tiempo para escribir un comentario y menos para mi. Tenemos mala fama escribiendo comentarios CSS porque no pensamos que tarde o temprano tendremos que retocar la hoja de estilos.

Desde el punto de vista de un diseñador/maquetador lo más importante es la ubicación, tanto en layout como en el sistema de plantillas.

Partiendo de esto podríamos considerar necesario:

  • Nombre de la sección
  • Ubicación en el diseño
  • Ubicación en las vistas (si usamos un framework)

Un ejemplo de uso seria:

/*
    SIDEBAR, menú de información principal
    [top right] base/sidebar.php
*/

Hay que pensar desde el punto de vista de que algún día retomaremos el CSS, con este pequeño comentario ubicaremos la plantilla en el diseño y en el framework facilitando la edición a otros maquetadores.


Nomenclatura en CSS

En el comentario de Nordic acerca de las propiedades CSS comenta sobre la nomenclatura de ID y Class.

Me ha picado la curiosidad para saber que nomenclatura es la idónea para escribir CSS.

Existen 3 tipos:

  • Guión medio: #mi-contenedor
  • Guión bajo: #mi_contenedor
  • CamelCase: #miContenedor

Normalmente para los lenguajes de programación se utilizan los dos últimos, debido a que el guión medio no puede ir en las variables.

En PHP por ejemplo se suele usar el guión bajo para los nombres de las funciones, en Ruby se utiliza el ultimo.

La verdad es que no entiendo cual puede ser el correcto.

Yo suelo utilizar el primero porque las propiedades CSS se escribe con guión medio (background-color, font-size).

Aunque también es cierto que para diferenciar las propiedades de los nombres de las clases se suelen escribir de diferente forma.

¿Que nomenclatura es la más acertada?


Orden de propiedades en CSS II

No hemos podido encontrar el articulo pero a todos nos suena, al final hemos llegado en los comentarios a un acuerdo y suponemos que la mejor forma de organizar las propiedades CSS es ir desde afuera para adentro.

Comportamiento

  • display
  • overflow
  • clear

Posición

  • position
  • float
  • top

Tamaño

  • height
  • width

Margenes y bordes

  • margin
  • border
  • padding

Texto

  • font
  • text
  • line-height

Fondos y colores

  • background
  • color

No pasa nada si no utilizas ningún orden pero es algo que se agradece cuando el volumen de código aumenta.