David Esperalta - Entrada "Usefull CSS classes, el invento" de la bitácora

Usefull CSS classes, el invento (+14 comentarios)

Thu, 13 Mar 2008 05:24:28 +0100

Ja ja ja. Me río yo sólo... por lo que se ve, en esta bitácora. Pero, en fin. Qué le vamos a hacer. No era de esto de lo que quería hablar. Tal vez otro día. Ahora quiero hablar de un invento (no es tal, ni mucho menos, esa era la "broma") en que he estado ocupado últimamente, por decirlo así, puesto que, lo que es pensar en ello, creo que llevo haciéndolo hace tiempo.

Me estoy refiriendo a cierta plantilla con clases CSS (Cascading Style Sheet, lo mismo te quedas igual) que he publicado en una página de esta bitácora, y, que igual te resulta útil, o curioso, o una tontería, yo qué sé, si no me dices nada. Copio aquí la plantilla por ocupar espacio y porque queda bonita, me parece a mí, vamos.

/* 
Usefull CSS classes
Under GNU LGPL license
(C) 2008 David Esperalta
http://www.davidesperalta.com
 
Please, dont remove this note
You can remove the legend if
you want a minor file size
*/
 
/* Leyend
fr = Float Left
fr = Float Right
cb = Clear Both
cl = Clear Left
cr = Clear Right
tc = Text Cursor
wc = Wait Cursor
hc = Help Cursor
dc = Default Cursor
pc = Pointer Cursor
cc = Crosshair Cursor
dn = Display None
db = Display Block
di = Display Inline
vh = Visibility Hidden
vv = Visibility Visible
ao = Auto Overflow
ho = Hidden Overflow
so = Scroll Overflow
vo = Visible Overflow
fp = Fixed Position
sp = Static Position
ap = Absolute Position
rp = Relative Position
al = Align Left
ar = Align Right
ac = Align Center
aj = Align Justify
bf = Bold Font
if = Italic Font
nf = Normal Font
af = Arial Font 
vf = Verdana Font  
of = Overline Font
uf = Underline Font
sf = Strike Font
wr = White and Red
rw = Red and White
wb = White and Black
bw = Black and White
*/
.fl{float:left}                   
.fr{float:right}                  
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.tc{cursor:text}
.wc{cursor:wait}
.hc{cursor:help}
.dc{cursor:default}
.pc{cursor:pointer}
.cc{cursor:crosshair}
.dn{display:none}
.db{display:block}
.di{display:inline}
.vh{visibility:hidden}
.vv{visibility:visible}
.ao{overflow:auto}
.ho{overflow:hidden}
.so{overflow:scroll}
.vo{overflow:visible}
.fp{position:fixed}
.sp{position:static}
.ap{position:absolute}
.rp{position:relative}
.al{text-align:left}
.ar{text-align:right}
.ac{text-align:center}
.aj{text-align:justify}
.bf{font-weight:bold}
.if{font-style:italic}
.nf{font-weight:normal}
.af{font-family:Arial}
.vf{font-family:Verdana}
.of{text-decoration:overline}
.uf{text-decoration:underline}
.sf{text-decoration:line-through}
.wr{background:#fff;color:red}
.rw{background:red;color:#fff}
.wb{background:#fff;color:#000}
.bw{background:#000;color:#fff}

Ahora bien, ya que has visto de qué va el asunto, más o menos por encima, te invito a informarte un poco mejor, si es que lo encuentras lo suficientemente interesante: Usefull CSS classes. Esta entrada la dejaré tal cual, quiero decir, si tengo algo que actualizar o decir acerca de la "plantilla CSS" en cuestión, lo haré en la página de esta bitácora, que acabo de enlazar.

Actualización importante: Los comentarios de Óscar, que puedes leer más abajo, me dejan claro que usar una plantilla como la que presento arriba, lejos de ser útil, puede resultar perjudicial, y, sobre todo, no es la forma correcta de hacer las cosas. Lee los comentarios a esta entrada, sobre todo los de Óscar, pero también los míos, intentando enterarme del asunto, y creo que también tú comprenderás que el uso de una plantilla así sería un error. Ah, ¡y agradece a Óscar la información al respecto! Aquí una entrada sobre esto último.

Comentario por "David Esperalta"

Wed, 19 Mar 2008 13:22:52 +0100

Gracias a ti otra vez más Óscar. ;)

Comentario por "Oscar"

Wed, 19 Mar 2008 13:16:30 +0100

(Una pequeña corrección: durante los comentarios de esta entrada hemos usado la expresión "clases en las CSS", incluso yo mismo. Está sencillamente mal. Las clases sólo existen en HTML y se establecen mediante el atributo class; luego a esas clases se les da un determinado estilo mediante selectores en las CSS.) Es inevitable usar ciertos atajos que, aunque no casen con los estándares actuales, ahorren trabajo a la larga. Por ejemplo, para colocar imágenes en las entradas de una bitácora: img.left { float: left; margin: 0 1em 1em 0 } img.right { float: right; margin: 1em 0 0 1em } Luego establecemos el atributo class de los elementos img a left o right, según deseemos. Nos ahorrará el tener que establecer de forma manual los márgenes y las posiciones de todas y cada una de las imágenes que adornan las entradas de nuestra bitácora. Aunque realmente hay muchas soluciones. Por ejemplo: div#bitacora img { margin: 1em } Teniendo tan sólo que establecer el atributo align de las imágenes: [img align="left"] o [img align="right"]. Bueno, ha sido un placer descubrir este pequeño rincón de la red y ser partícipe de él. Cualquier asunto en que pueda ayudarte, no dudes en contactarme, aunque por supuesto seguiré leyéndote. Saludos desde Madrid.

Comentario por "David Esperalta"

Mon, 17 Mar 2008 08:58:48 +0100

Por cierto, otra cosilla... repasando las hojas de estilo para "reparar" el uso de ciertas clases, debo decir que encuentro otro error más en la plantilla: demasiadas clases. Sin duda me emocioné con el asunto, y añadí clases que, ni siquiera en el caso de considerarlas "correctas", hubiera usado nunca. Esto lo he visto porque el repaso que he hecho ha conllevado quitar clases como "bold" e "italic", pero, en la plantilla se presenta por lo menos una docena de clases... ya digo, porque me dejé llevar de la emoción, supongo. ;) También parece quedarme claro que debería leer más sobre este asunto, eso, por descontado. Todo se andará, quiero suponer. :P

Comentario por "David Esperalta"

Mon, 17 Mar 2008 08:53:16 +0100

Hola Jesús, Yo también me encuentro con el dilema de usar clases como "center". He pegado un repaso a las hojas de estilo de algunos proyectos, y, bueno, por ejemplo, me he deshecho de clases como "bold", puesto que ahora veo mejor usar la etiqueta HTML "strong". Sin embargo, la clase "center" sigue ahí mirándome como diciendo, ¿y qué quieres que haga? A lo mejor es que aquí se da también una confusión entre el nombre de la clase. ¿Tal vez si se llamase "el-centrado" iría mejor? Ya, sé que es una tontería. Pero, lo que está claro es una cosa: a veces necesitas que un elemento se muestre centrado (como dices, suelen ser elementos "DIV", "P") y entonces la verdad es que creo que algo como la clase "center" puede ir bien. Otra cosa es preparar una plantilla con este tipo de clases. Porque, como tú mismo dices Jesús, dependerá del proyecto en cuestión. En definitiva, la idea de la plantilla, desde luego, no me parece útil. Porque se da por hecho que se usarán ciertas clases que acaso ni se usen siquiera. Eso sí que me queda claro ahora, después de lo que comentó Óscar. PD. Me alegro de que "te guste" mi bitácora, a veces pienso que "naide" la visita, o que sólo escribo para "buscadores". Saber que hay alguien por ahí leyéndola de vez en cuando me hace sentir un poco mejor Jesús. ¡Gracias! ;)

Comentario por "Jesús"

Mon, 17 Mar 2008 08:34:51 +0100

Después de repasar la entrada y todos los comentarios ... Creo que optar por una opción u otra puede depender mucho del tipo de proyecto y de tu manera de trabajar. Por ejemplo, habitualmente uso algunas clases del tipo: .left { float: left; } .right { float: right; } .clear { clear: both; } .center { text-align: center !important; } Uso esas (y puede que un par más, dependiendo del proyecto), porque me dan una mayor agilidad a la hora de trabajar. Además, para el html uso una especie de plantilla , donde lo que cambia entre página y página de una web es el contenido principal. Algo así: #cabecera #menu #contenido #pie Donde sólamente #contenido (que cargo mediante include de php) es la parte que cambia, por lo tanto no se me da el caso en que tenga que hacer un cambio en 2.500 documentos. De todos modos, normalmente sólo le aplico esas clases a los elementos tipo div o span (justamente los que no son contenido semántico del html), para ayudarme en la maquetación con css. Así que creo que estoy en un punto intermedio entre tu postura y la de Óscar (aunque bastante más cerca de la suya). Un saludo, y ánimo con el blog. Estoy suscrito al feed desde hace unas semanas, y sueles escribrir cosas bastante interesantes.

Comentario por "David Esperalta"

Mon, 17 Mar 2008 02:34:48 +0100

Asumiendo que estaba equivocado, me pongo a repasar las hojas de estilo de alguno de mis proyectos, y, me encuentro con esto, por ejemplo: img.floatleft { float: left; margin: 0.5em 1em 0.5em 0; } img.floatright { float: right; margin: 0.5em 0 0.5em 1em; } .center { text-align: center; } Ahora bien, creo que las dos primeras reglas son válidas. Sin embargo, respecto de la última, creo que no lo es, pero, tampoco soy capaz de darle una "solución". Al fin y al cabo, se trata de centrar un determinado elemento (da igual cuál, puesto que no se especifica) y, no se me ocurre cómo podría hacerlo de otro modo. Quizás nombrando dicha clase "center" por algo como... ¿por algo como qué? Ja ja ja... qué lío tengo en la cabeza, madre mía. ;) Tal vez es que hemos de concluir que el uso de la plantilla en cuestión, desde luego no era correcto, pero, al fin y al cabo, alguna clase como "center", en este caso, sí debe serlo... Entiendo que podría utilizar una clase por cada elemento que necesite centrarse, pero, me parece excesivo, puesto que podemos estar hablando de decenas de elementos, cuyo estilo, además, se reduciría a eso: a centrarse. Tal vez es que hay que llegar a un punto "realista", y, si bien preparar varias clases CSS a modo de plantilla es un error, tal vez, digo, una clase como "center" no sea del todo incorrecta. Puede que no sea una solución "pura", no sé si me explico, pero, al menos es "realista". ¿Qué te parece? A ver si me centro yo un poco en este asunto... ;)