[Ovillo] CSS Attribute Selectors
Hola,
Estoy maquetando una web en la que se combinan diferentes fuentes
(font-family) y tamaños (font-size).
Hasta ahora había resuelto esto defiendo clases específicas para cada caso.
Por ejemplo:
.light-12 {
font-size: 12px;
}
...
.light-12, .light-14, .light-32 {
font-family: 'fooLight';
}
De pronto me he encontrado con este artículo del W3C que explica los
selectores por atributos[1]; y he pensado que quizás podía sacarle partido
para poder agrupar las definiciones quedando algo como:
.light-12 {
font-size: 12px;
}
...
[class|=light] {
font-family: 'fooLight';
}
Realmente, esto es sólo un ejemplo ilustrativo pero creo que se le puede
sacar mucho partido si utilizas prefijos en los nombres de clases como algo
parecido a un "namespace" en programación.
¿Qué opináis sobre esta solución? ¿es demasiado enrevesada? ¿puede traer
problemas?
Gracias.
CHK
[1] http://www.w3schools.com/css/css_attribute_selectors.asp
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] CSS Attribute Selectors
Hola,
yo no los usaría. Aparte de que pueden dar problemas en el Explorer, en
realidad no son necesarios y te complican la existencia.
Es más limpio si defines estilos completos y usas class.
Por ejemplo
.desarrollo {
font-family tal
font-size pascual
}
.titulares...
Si tienes que retocar esa página dentro de dos años, te será más fácil
localizar cada cosa y cambiarla (entre otras ventajas).
S2.
Marcos
El 30 de agosto de 2012 15:00, CHK Webmaster escribió:
> Hola,
>
> Estoy maquetando una web en la que se combinan diferentes fuentes
> (font-family) y tamaños (font-size).
> Hasta ahora había resuelto esto defiendo clases específicas para cada caso.
> Por ejemplo:
>
> .light-12 {
>font-size: 12px;
> }
> ...
> .light-12, .light-14, .light-32 {
>font-family: 'fooLight';
> }
>
>
> De pronto me he encontrado con este artículo del W3C que explica los
> selectores por atributos[1]; y he pensado que quizás podía sacarle partido
> para poder agrupar las definiciones quedando algo como:
>
> .light-12 {
>font-size: 12px;
> }
> ...
> [class|=light] {
>font-family: 'fooLight';
> }
>
>
> Realmente, esto es sólo un ejemplo ilustrativo pero creo que se le puede
> sacar mucho partido si utilizas prefijos en los nombres de clases como algo
> parecido a un "namespace" en programación.
> ¿Qué opináis sobre esta solución? ¿es demasiado enrevesada? ¿puede traer
> problemas?
>
> Gracias.
> CHK
>
> [1] http://www.w3schools.com/css/css_attribute_selectors.asp
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
Marcos Méndez Filesi
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] CSS Attribute Selectors
Buenas tardes:
Yo estoy con Marcos: No es recomendable usar
nombres de clases con las propiedades que representan.
Por eso mismo en html se cambio: b por strong,
i por em.
Por otra parte, hace poco en las listas comentaron como
unir clases para dotar de más versatilidad a las css.
Ejemplo:
.estilo1 {
font-family: Arial;
}
.estilo2 {
font-family: Verdana;
}
.estilo1.destacado {
font-size: 18px;
}
.estilo2.destacado {
font-size: 20px;
}
.estilo1.normal {
font-size: 14px;
}
.estilo2.normal {
font-size: 16px;
}
asi podrias tener:
Este texto será Arial y 14px
Este texto será Arial y 18px
Este texto será Verdana y 16px
Este texto será Verdana y 20px
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 30 de agosto de 2012 15:12, marcos méndez filesi
escribió:
> Hola,
>
> yo no los usaría. Aparte de que pueden dar problemas en el Explorer, en
> realidad no son necesarios y te complican la existencia.
>
> Es más limpio si defines estilos completos y usas class.
>
> Por ejemplo
>
> .desarrollo {
> font-family tal
> font-size pascual
> }
>
> .titulares...
>
> Si tienes que retocar esa página dentro de dos años, te será más fácil
> localizar cada cosa y cambiarla (entre otras ventajas).
>
> S2.
>
> Marcos
>
> El 30 de agosto de 2012 15:00, CHK Webmaster
> escribió:
>
> > Hola,
> >
> > Estoy maquetando una web en la que se combinan diferentes fuentes
> > (font-family) y tamaños (font-size).
> > Hasta ahora había resuelto esto defiendo clases específicas para cada
> caso.
> > Por ejemplo:
> >
> > .light-12 {
> >font-size: 12px;
> > }
> > ...
> > .light-12, .light-14, .light-32 {
> >font-family: 'fooLight';
> > }
> >
> >
> > De pronto me he encontrado con este artículo del W3C que explica los
> > selectores por atributos[1]; y he pensado que quizás podía sacarle
> partido
> > para poder agrupar las definiciones quedando algo como:
> >
> > .light-12 {
> >font-size: 12px;
> > }
> > ...
> > [class|=light] {
> >font-family: 'fooLight';
> > }
> >
> >
> > Realmente, esto es sólo un ejemplo ilustrativo pero creo que se le puede
> > sacar mucho partido si utilizas prefijos en los nombres de clases como
> algo
> > parecido a un "namespace" en programación.
> > ¿Qué opináis sobre esta solución? ¿es demasiado enrevesada? ¿puede traer
> > problemas?
> >
> > Gracias.
> > CHK
> >
> > [1] http://www.w3schools.com/css/css_attribute_selectors.asp
> > ___
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
>
>
>
> --
> Marcos Méndez Filesi
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] CSS Attribute Selectors
Perdon los dos p de abajo son estilo2 :D
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 30 de agosto de 2012 15:21, Manuel Canga - Latrasweb.net <
i...@latrasweb.net> escribió:
> Buenas tardes:
>
> Yo estoy con Marcos: No es recomendable usar
> nombres de clases con las propiedades que representan.
> Por eso mismo en html se cambio: b por strong,
> i por em.
>
> Por otra parte, hace poco en las listas comentaron como
> unir clases para dotar de más versatilidad a las css.
>
> Ejemplo:
>
> .estilo1 {
> font-family: Arial;
> }
>
> .estilo2 {
>font-family: Verdana;
> }
>
> .estilo1.destacado {
> font-size: 18px;
> }
>
> .estilo2.destacado {
>font-size: 20px;
> }
>
> .estilo1.normal {
> font-size: 14px;
> }
>
> .estilo2.normal {
> font-size: 16px;
> }
>
> asi podrias tener:
> Este texto será Arial y 14px
> Este texto será Arial y 18px
> Este texto será Verdana y 16px
> Este texto será Verdana y 20px
>
>
>
> Un saludo
> --
> Manuel Canga
> Desarrollo creativo de
> CMS y frameworks
> Email: *i...@latrasweb.net*
> Web: http://www.latrasweb.net
> Twitter: http://twitter.com/latrasweb_net
>
>
>
> El 30 de agosto de 2012 15:12, marcos méndez filesi
> escribió:
>
> Hola,
>>
>> yo no los usaría. Aparte de que pueden dar problemas en el Explorer, en
>> realidad no son necesarios y te complican la existencia.
>>
>> Es más limpio si defines estilos completos y usas class.
>>
>> Por ejemplo
>>
>> .desarrollo {
>> font-family tal
>> font-size pascual
>> }
>>
>> .titulares...
>>
>> Si tienes que retocar esa página dentro de dos años, te será más fácil
>> localizar cada cosa y cambiarla (entre otras ventajas).
>>
>> S2.
>>
>> Marcos
>>
>> El 30 de agosto de 2012 15:00, CHK Webmaster
>> escribió:
>>
>> > Hola,
>> >
>> > Estoy maquetando una web en la que se combinan diferentes fuentes
>> > (font-family) y tamaños (font-size).
>> > Hasta ahora había resuelto esto defiendo clases específicas para cada
>> caso.
>> > Por ejemplo:
>> >
>> > .light-12 {
>> >font-size: 12px;
>> > }
>> > ...
>> > .light-12, .light-14, .light-32 {
>> >font-family: 'fooLight';
>> > }
>> >
>> >
>> > De pronto me he encontrado con este artículo del W3C que explica los
>> > selectores por atributos[1]; y he pensado que quizás podía sacarle
>> partido
>> > para poder agrupar las definiciones quedando algo como:
>> >
>> > .light-12 {
>> >font-size: 12px;
>> > }
>> > ...
>> > [class|=light] {
>> >font-family: 'fooLight';
>> > }
>> >
>> >
>> > Realmente, esto es sólo un ejemplo ilustrativo pero creo que se le puede
>> > sacar mucho partido si utilizas prefijos en los nombres de clases como
>> algo
>> > parecido a un "namespace" en programación.
>> > ¿Qué opináis sobre esta solución? ¿es demasiado enrevesada? ¿puede traer
>> > problemas?
>> >
>> > Gracias.
>> > CHK
>> >
>> > [1] http://www.w3schools.com/css/css_attribute_selectors.asp
>> > ___
>> > Lista de distribución Ovillo
>> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> > http://lists.ovillo.org/mailman/listinfo/ovillo
>> >
>>
>>
>>
>> --
>> Marcos Méndez Filesi
>> ___
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> http://lists.ovillo.org/mailman/listinfo/ovillo
>>
>
>
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
