Diseña tus CSS

ByLuis

Paso a resumir un artículo que nos podrá ayudar a la hora de diseñar nuestras CSS, porque como bien dicen, el poner todos los estilos en un solo fichero ya pasó a la historia.

Algo tan importante como la estructura de nuestro sitio es la organización de las CSS en ficheros, claro que no hay una solución perfecta ya que depende de cada situación.

Una posible solución es la que está basada páginas-modelo, es decir, que existe un diseño diferente para distintos modelos de páginas, por ejemplo un diseño para la página principal, otro para las subpáginas, otro para el portfolio, … Este modelo es útil cuando se trata de pocos tipos de diseño, aunque nos podemos encontrar con estilos comunes entre los distintos diseños, lo que complica la solución. Claro, que este problemilla se puede solucionar de distintas formas:

  • Usar un archivo css que agrupe los estilos comunes, aunque ayuda a tener estructurados los ficheros de estilos, si se trata de un sitio grande, puede que este archivo aumente demasiado.
  • Duplicar estilos en CSS independientes, tiene el problema de tener código redundante y tener que corregir cambios en distintos sitios en vez de en un único sitio.
  • Crear un fichero nuevo que puede ser usado por otros, no hay redundancia en este caso.
  • Crear un nuevo CSS que agrupe estos pequeños casos.

Otra solución es diferenciar los estilos por elementos de la página, con esto se quiere decir que si nuestra página se crea dinámicamente y hay un fichero para la cabecera, otro para el cuerpo, otro para la navegacion, puede haber perfectamente sus correspondientes estilos, por lo que solo se incluyen los estilos para cada parte que se use.

Parecido a lo anterior es clasificarlo por etiquetas, por ejemplo, si se usan tablas o formularios, unos estilos para estos elementos y solo incluirlas en las páginas que los contengan.

Otros consejos útiles es separar los estilos para print, handheld and screen y usar @import para incluir estilos en un fichero CSS principal.

A parte de la organización física de los ficheros, tampoco hay que olvidar lo que ya hemos comentado en otras ocasiones que las clases e identificaciones deben tener un significado por su funcionalidad y no por lo que muestran (ej: no usar una clase que sea “rojo”, sino una que sea “error”, el que sea rojo o verde no es significaquivo). Agrupa estilos por contexto y usa comentarios para una mejor localización.

Architecting CSS

Vía / Digg

Similar Posts

Sitemap mediante CSS

ByLuis

Los sitemaps no son algo que al desarrollador le suela preocupar, no se suele pensar en la importancia de ellos, tanto para el usuario como para los motores de búsqueda.

Para aquellos que quieran incluir el sitemap con un buen diseño puede usar este truco que hemos encontrado.

csssitemap.png

Podemos darle un estilo parecido si añadimos CSS al siguiente sitemap:

<div id="sitemap">
<ul>
<li>Web Root
<ul>
<li>stuff
<ul>
<li>nested-deep
<ul>
<li>nested-deeper
<ul>
<li>nested-deepest</li>
</ul>
</li>
</ul>
</li>
<li>nested deep</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Sin estilos sería así:

  • Web Root
    • stuff
      • nested-deep
        • nested-deeper
          • nested-deepest
      • nested deep

Y para que quede como la imagen anterior debería tener los siguientes estilos:

#sitemap {
font:normal 16px Arial,sans-serif;
overflow:hidden;
}
#sitemap ul {
list-style:none;
margin:0;
padding:0;
}
#sitemap li {
background-color:#eee;
margin:0 0 -0.1em;
min-height:1em;
padding:.2em .4em;
position:relative;
width:9em;
}
#sitemap ul ul {
font-size:90%;
margin-top:-1.4em;
}
#sitemap ul ul li {
background:#ddd;
border-top:0.5em solid #fff !important;
border-left:0.5em solid #66c;
left:10.4em;
}
#sitemap ul ul ul li {
background:#ccc;
border-color:#9c3;
}
#sitemap ul ul ul ul li {
background:#bbb;
border-color:#c93;
}
#sitemap ul ul ul ul ul li {
background:#999;
border-color:#c33;
color:#fff;
}

CSS SiteMap

Vía / Posh CSS

Consejos para desarrollar cumpliendo estándares

ByLuis

Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.

  • Menos es más, no uses mas código del necesario
  • No uses CSS o Javascript dentro del HTML, ya sea en las etiquetas como en el head.
  • Usa código semántico, las cabeceras mediante etiquetas h1, h2, …, resaltar mediante strong, …
  • No uses meta etiquetas redundantes
  • Usa microformatos para hacer tu sitio legible
  • Usa tablas solo para mostrar tablas
  • Usa rel=”external” para enlaces externos, no uses target=”_blank”, hazo mediante Javascript
  • No uses Javascript mediante enlaces
  • No muestres contenido importante mediante Flash o Ajax, siempre mediante HTML plano

10 Coding Guidelines for Perfect Findability and Web Standards

|

Crear nuestros propios checkboxes y radio buttons mediante CSS

ByLuis

A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.

fuglychecks.pngEsto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.

Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).

Tenemos estos elementos HTML:

<input type="checkbox" id="opc1"/><label for="opc1">Opcion 1</label>

Los estilos iniciales para el input y para el label son los siguientes:

input[type="checkbox"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
label {
padding-left: 20px;
height: 16px;
}

Y por último, los estilos para los distintos estados del input son los siguientes:

input[type="checkbox"] + label{
background: url("imagen.png") 0 0 no-repeat;
}
input[type="checkbox"]:focus + label{
background-position: 0 -16px;
}
input[type="checkbox"]:checked + label{
background-position: 0 -32px;
}
input[type="checkbox"]:checked:focus + label{
background-position: 0 -48px;
}

Styling Checkbox and Radio Graphics With Only CSS

Vía / Digg

$fx(): librería javascript para animaciones

ByLuis

$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style

Consejos para estructuras tus CSS

ByLuis

Buenos consejos para realizar tus estilos CSS bien estructurados.

  • Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
  • Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
  • Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
  • Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
  • Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, …)
  • Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

Write a well structured CSS file without becoming crazy

Vía / CSS Globe

| |

HTML5 Boilerplate

ByLuis

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, perfo …

Post original