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.
Publicada el 13/3/2008 05:24 AM por David Esperalta
Suscribirse a esta entrada - URL para Trackbacks
No es aconsejable usar una plantilla como ésa. El fin de las CSS precisamente es diferenciar entre presentación y contenido. Por tanto, las clases deben hacer referencia al contenido que representan y no a un estilo concreto.
Hola,
Pues no sé qué decirte. Yo vengo usando una hoja de estilo para "resetear" ciertas reglas, y no me la he inventado yo, que no digo que esté bien, pero, dicha hoja de estilo es la usada por Yahoo!, por ejemplo, de hecho es quien la desarrolló. Y, como he dicho en la entrada, siempre acabo por necesitar ciertas clases, para poner texto en negrita, en cursiva, para hacer flotar elementos a la derecha, a la izquierda, etc.
Ahora bien, ¿qué hay de malo en eso? Reconozco que no uso, ahora mismo, la plantilla que presento, en ninguno de mis proyectos, pero, no entiendo muy bien tu razonamiento. Claro que no digo que no tenga su lógica, simplemente, que no la acabo de entender. ;)
Comprendo que la plantilla no es la solución para todo, de la misma manera que no se me escapa que la hoja de estilo para "resetear" reglas tampoco lo es todo. Obviamente será preciso otra hoja de estilo, pero, ¿por qué no usar una plantilla que incluya las clases de uso más común? ¿Cada vez que necesite poner el texto en negrita habré de usar una clase "distinta"? ¿Y qué diferencia hay entre usar una clase distinta y usar una que esté en cierta plantilla ya preparada?
Dicho con un ejemplo. Supongamos que necesito poner cierto texto en negrita, y, para ello, preparo una clase tal que:
.bold { font-weight: bold; }
¿Qué diferencia hay entre hacer eso y usar la clase "bf" de la plantilla ya preparada? ¿No es correcto el uso de la clase "bold", entonces, para poner en negrita este o aquel texto? Todas estas preguntas las hago con la intención de aprender, ¿eh? Porque, uno siempre tiene que estar dispuesto a hacerlo, y, si acaso descubre que estoy haciendo algo mal... debería plantearme hacerlo de otra forma, si puede ser, la correcta, claro está.
Además, me planteo la posibilidad de usar varias clases para un mismo elemento, algo que, desde luego, es posible hacer. ¿No estaría esto contradiciendo tu idea? Quiero decir, lo que me parece del todo imposible es preparar una serie de clases para todo y para todos, pero, no es eso lo que yo pretendía, sino sólo una plantilla, con una serie de clases, útiles, en cierto modo, prácticamente en todas las aplicaciones. ¿Pero esto es un error? Si es así lo dejaré claro en la entrada y no recomendaré a nadie el uso de mi "invento", desde luego. ;)
¿Y qué diferencia hay entre lo que tú propones y establecer los estilos a la vieja usanza, usando las etiquetas B, I, etc.? Pues en términos de facilidad de trabajo, muy poca.
Puedes mirarte las recomendaciones de la W3C. Yo no digo que plantillas como ésas no se usen, no sean útiles o sean incorrectas; simplemente digo que no son aconsejables. Lo aconsejable es asociar cada clase a un determinado elemento de la estructura de un documento.
Siento ser tan somero y tan poco didáctico; tengo pocas ganas de escribir y he de preparar mi maleta, que volar dentro de unas cuantas horas.
(Bueno, sí voy a añadir lo siguiente: imagina que tienes 500 archivos HTML, con sendas cabeceras H1. Quieres que la cabecera aparezca alineada a la derecha, en negrita y con un cursor de ayuda; estableces por tanto su atributo class="ar hc bf". Ahora llega tu jefe (o tú mismo) y decide que hay que quitar el cursor de ayuda. Con tu plantilla, tendrías que cambiar el atributo class de los h1 de tus 500 documentos, uno por uno. Con un uso adecuado, sería una única línea de tu CSS:
Cambiar
h1 { cursor: help; font-weight: bold; text-align: right }
por
h1 { font-weight: bold; text-align: right }
¿Hay ahorro de trabajo? Sí. Por el simple hecho de que mantenemos independiente la estructura de la presentación.)
Me voy a tomar un café.
Ajá. Pues ahora lo entiendo mejor. Sin embargo, tengo una duda Óscar. Si te limitas a asignar un determinado estilo a los elementos "H1", por seguir con tu ejemplo, ¿no serías demasiado drástico? Quiero decir, ¿en todo caso, todos los elementos "H1" tendrían que tener el mismo estilo? ¿Por qué? ¿Para qué las clases de CSS entonces?
Ya digo, me queda un poco más claro, pero, sigo sin comprenderlo del todo, seguramente, por mi ignorancia. Pero, lo diré una vez más, si asocias un estilo determinado a los elementos "H1",... me parece que es ser demasiado drástico, porque, seguramente, nos interese dar un estilo a un determinado elemento "H1", no a todos ellos. Y para eso las clases (y digo clases, en plural, puesto que pueden usarse varias a la vez), ¿no? De todas formas te agradezco un montón tus comentarios.
Voy a ver si puedo explicarme de otro modo. El origen de la plantilla en cuestión, lo comento en la entrada. En los "proyectos web" que me traigo entre manos, noto que hay ciertas clases que repito una y otra vez. Por ejemplo, preparo una clase de nombre "floatleft", que utilizo cuando quiero que un elemento (cualquier elemento, incluso más de uno en la misma página) flote a la izquierda.
Entonces, cuando veo que repito clases como "floatleft", "bold", "italic" y así, me digo, ¿por qué no preparar una plantilla con estas clases que siempre termino usando en las páginas? Ahora bien, ¿es un error entonces usar este tipo de clases? ¿Tendría que plantearme el asunto de otro modo? Si necesito que un elemento flote a la izquierda, ¿qué hago? ¿Preparo una clase exclusivamente para ese elemento? ¿Por qué razón no usar una clase "genérica", por decirlo así?
Y, suponiendo que estemos de acuerdo en que usar este tipo de clases "genéricas" para ciertos elementos es correcto, ¿por qué no usar una plantilla con dichas clases? El objetivo, pues, es cubrir cierta necesidad, y la plantilla podría hacerlo, porque no es más que poder contar con ciertas clases que al cabo vas a tener que escribir. Ahora bien, la solución que doy a mi necesidad, es decir, usar clases como "floatleft", "bold", etc., puede ser un error. Y si esto es así, entonces también la plantilla sería un error.
Es que ya digo, estoy dispuesto a rectificar, pero, no termino de ver el asunto claro. La única razón para no usar la plantilla (que por otro lado no uso, lo reconozco) sería darme cuenta de que una clase como "floatleft" no tiene sentido. O que usar algo como una clase "bold" tampoco lo tiene. Si es así, y debería no usar este tipo de clases, sino otras "específicas para cada elemento", entonces sí, estaría contigo, y yo mismo desaconsejaría el uso de la plantilla, y me replantearía las hojas de estilo que vengo utilizando.
Por cierto, si tienes algún enlace sobre este asunto (por no cansarte intentando enseñar a un zoquete como yo) te los agradecería tanto como tus comentarios Óscar. ;)
A ver, una clase no es un estilo determinado. Una clase determina un tipo de elemento. Por ejemplo, imagina que tienes un documento con varias cabeceras H2: un H2 para el título de la entrada y varios H2 con los títulos de los comentarios, en caso de que fuera una bitácora.
[h2 class="post-title"]El título de la entrada[/h2] [h2 class="comment-title"]Título de un comentario[/h2] [h2 class="comment-title"]Título de otro comentario[/h2]
(Uso corchetes en vez de signos "menor que" y "mayor que" porque si no, no sale.)
Bien, puedes ver que hay tres elementos H2, pero se les atribuyen clases diferentes. El atribuirle una clase coherente con su contenido te permitirá después más flexibilidad y consistencia en la CSS. Al 'post-title' le pondremos negrita; al otro, no.
h2.post-title { font-weight: bold } h2.comment-title { font-weight: normal }
Pues ya tienes estructura y presentación separados. Ahora, cuando quieras modificar la apariencia de una clase de elemento, simplemente tendrás que cambiar en la CSS una única línea. ¿Qué quieres los títulos de los comentarios en negrita?
h2.comment-title { font-weight: bold }
De la otra forma, asociando una clase a un estilo, también funcionaría; pero sería mucho más tedioso en cuanto los documentos fueran más complejos. Por eso yo creo que no es un error, porque funciona. También creo que no es nada recomendable. Las CSS tienen como fin, y no me cansaré, el separar la presentación de la estructura. Porque el día que quieras cambiar un DIV, presente en 2.500 documentos, que flota a la derecha para que flote a la izquierda, no tendrás que ir modificando su clase archivo por archivo, 2.500 veces, cambiando fr por fl. Te irás a tu CSS, verás div.copyright (o la clase que sea) y le pondrás float: left. Simple y versátil.
Hay muchas páginas que tratan este asunto. Demasiadas, creo. Una búsqueda en Google por "css contenido presentacion" o "css estructura presentacion" te dará para unas cuantas lecturas. Y no te preocupes, el único zoquete que veo por aquí soy yo. Espero haberme explicado esta vez mejor. Pero si tampoco te sirve y San Google no ayuda, pues por aquí estaré yo para echar un cable en la medida que sea posible, que será poca pues no paso de mero aficionado.
¡Salud!
Hola Óscar, muy agradecido por tus comentarios. Y sí, creo que tengo que darte la razón. De hecho ya en tu primer o segundo comentario veía que algo estaba haciendo mal.
De hecho la plantilla nunca me terminó de convencer, pero, es que ahora sé porqué no debería utilizarse. Comprendo que no debo usar clases como "floatleft", "bold", "floatright", etc.
De este modo, la plantilla no tiene ya razón de ser. Quizás yo quería, precisamente, con dichas clases, ahorrar trabajo, no tener que definir el estilo de ciertos elementos una y otra vez.
Me explico. Si un elemento ha de flotar a la izquierda, en lugar de utilizar una clase "floatleft", debería usar una clase que identificase a dicho elemento, para hacerlo flotar a la izquierda.
Incluso si existen varios elementos en la misma página, cada uno acaso debería tener su propia clase. Esto, que me queda ahora más o menos claro, me deja algunas dudas, como, por ejemplo, para qué la posibilidad de usar varias clases en un mismo elemento.
Sin embargo, creo que al cabo tengo que darte la razón. Por supuesto, no recomendaré la plantilla en cuestión, y, por otro lado, como he dicho, tendré que replantearme algunas de mis hojas de estilo.
Soy yo el zoquete, porque, fíjate que lo veo claro, pero, no termino de hacerlo del todo... por ejemplo en el asunto de la posibilidad de dar más de dos clases a un elemento. Pero, definitivamente, creo que llevas razón Óscar.
Bueno. ¿De esto se trataba no? Mantenerse uno en una postura que ve equivocada, no tiene, al menos en este caso, mucho sentido. ¡Ah ladrón! Que ahora tendré que revisar varias de mis hojas de estilo... también tendría que leer más sobre este asunto, no se me escapa.
¡Muchas gracias otra vez Óscar! ¡Muy interesantes tus comentarios y muy prácticos y útiles! ;)
Hola de nuevo. Quería comentar algo acerca de la hoja de estilo para "resetear" ciertas reglas, que, he comentado que utilizo en algunos de mis proyectos, y he comparado con la plantilla que había presentado en esta entrada.
Creo que no son comparables. ¿Por qué? Porque la hoja de estilo para "resetear" reglas no se refiere a clases, no usa clases, como he querido hacer yo en mi plantilla, sino que se limita a ciertos elementos HTML.
Creo que por esto el uso de esta hoja de estilos (para "resetear" reglas) sí que es correcto, mientras que, la plantilla que yo he propuesto, definitivamente, no parece serlo. Creo que no me equivoco al pensar así. ;)
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... ;)
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.