¿Extensión generadora de prioridades CSS?

kikeking1 · #1 (**permalink**) 17/07/2013, 02:39

Hola buenas a todos, a ver si alguno conoce algo parecido a lo que busco.

Como todos sabemos mientras mas especifica es una regla css más prioridad tiene sobre las otras. Un ejemplo rapido para ponernos en situación.

Código PHP:

  <body> 
    <div class='wrap'> 
        <p>Hola mundo!</p> 
    </div> 
<body>

Código CSS:

Ver originalp { color:red; }
div > p { color:blue; }
body > div.wrap > p { color:green; }

Como podemos ver, aunque las tres reglas css, afectaran al elemento p, la que priorizara y será la que finalmente aplique el color al parrafo, será la última (en verde) ya que es mucho mas concreta y especifica que las anteriores.

Bien, me gustaria saber si alguien conoce alguna extensión para firefox o chrome u opera, o algun pluggin para sublime text, o alguna herramienta externa (lo ideal para mi sería una extesión para firebug de firefox [y la repanocha sería que fuera compatible con nightly o aurora]) con la que generar reglas de css con la máxima prioridad posible.

Desde ya adelanto, que la opcion de !important no es una solución para mi. Ya que el problema esta en que tengo bloques de estructuras identicos, con clases globales identicas y que practicamente la unica forma de diferencia que tengo es la posición de los elementos. Os pongo un ejemplo de algunas reglas que he tenido que usar para maquetar un elemento en concreto:

Código CSS:

Ver original.private-page .columns-max .portlet-message-boards #_86_fm.aui-form.yui3-widget.aui-form-validator.aui-form-validator-content > .aui-button-holder:nth-child(7) { /* Code */ }
 
.private-page #navigation.sort-pages.modify-pages.yui3-dd-drop + script + script + div { /* Code */ }
 
.private-page .aui-form-validator .aui-tabview-list + table > tbody > tr:first-child td[align="right"] { /* Code */ }

Como veis, tengo que hacer autenticos malabares para poder selecionar algunos elementos, y obviamente llegar a estas regla suponen un rato de escrutinio de la estructura del DOM. Es por esta cantidad de tiempo que empleo que busco alguna herramienta que me ayude a agilizar el trabajo.

Toda ayuda o consejo que me brindeis, será bien agradecido.

Gracias de antemano comunidad.

Un saludo.

pzin · #2 (**permalink**) 17/07/2013, 04:18

Personalmente no conozco ninguna. Aunque nunca he buscado porque no me he topado con un caso como el tuyo.

Viendo la salvajada de selectores, supongo que no tienes posibilidad alguna de cambiar el HTML ¿no? Añadir algunos identificadores o algo así para simplificar todo un poco. Es bastante bestia eso que haces. Y si es mucho mucho código incluso puede afectar al rendimiento, porque el motor del navegador lee los selectores al revés. Es decir, tomando como ejemplo la linea #5 de tu código, primero selecciona todas las celdas alineadas a la derecha del documento, luego las de la primera fila, luego las que sean hijas de tbody, etc...

Sé que no es la respuesta que esperabas e igual, como digo, no hay ninguna posibilidad de cambiar el HTML, pero yo es lo que intentaría sea como sea. Debe de ser una locura mirar el documento para crear cada selector.

Rafael · #3 (**permalink**) 17/07/2013, 04:24

Tampoco tengo una respuesta,

sólo comento que la pregunta es muuuy interesante, aunque también se me hace un caso extremo. Me gustaría ver esta página tan compleja, y por qué la necesidad de estilos tan particulares.

Edito. Si la única manera posible de diferenciar es la posición de los elementos, tal vez puedas explotar el Nth child
http://www.w3schools.com/cssref/sel_nth-child.asp

kikeking1 · #4 (**permalink**) 17/07/2013, 05:13

Hola, mucha gracias por la respuesta de ambos.

Mi situación es que me encargo de hacer la "maquetación" con solo css, y otra empresa es la que se encarga de la programación (lo cual incluye la arquitectura html) ... Si lo se, una completa locura, pero como los que deciden son los inversores y no los profesionales.. pues nos toca comernos el marron.....

Sin duda, lo mejor sería cambiar el html y hacerlo mas concreto (y valga tambien destacar, que se podrian establecer microformatos que hagan más semantica la web), pero de esto se encarga la otra empresa y no son muy imaginativo encuanto a necesidades de maquetacion, tendría que ir enumerandole elemento por elemento, donde se encuentra exactamente y que me entiendan, en los casos que me veo completamente ahogado y no me queda otra tiro por aqui, pero no es una opción viable para hacerlo con todo (nuevamente todo esto se solventaria si yo mismo hiciera el html+css.. pero en fin)

Sobre lo que comenta Rafael del uso del nth-child, ciertamente lo uso bastante para poder salvar estos problemas, pero muchas secciones son "clonicas" a nivel de codigo, pero no a nivel de diseño y me encuentro muchas veces, que un boton que aparece como 7 hijo, debe ir a la izquierda, otra a la derecha, y la unica forma de diferenciarlo, son rebuscando algun script o algun br o etiqueta vagabunda que haya de más y apoyarme en eso (totalmente deacuerdo que esta practica es horrible..)

Sin duda alguna esto es un caso realmente singular y extremo, y lo que más complica es la forma de trabajar, que la propia complejidad página, por lo que no hay que verlo como un trabajo normal.

Y a grandes rasgos este es el marco sobre el que estoy trabajando este proyecto.

A ver si hay suerte y alguien conoce alguna herramienta que pueda acercarse a esta necesidad

P.D.: Esto te lo dedico Pzin, dices que si hay mucho más codigo puede afectar al rendimiento........... llevo 3500 lineas (cada estilo es una linea, no me gusta escribir en cascada) y un total de 0.5MB en css (si si medio mega, no es un error tipografico) .... 3 .... 2... 1...¡podeis llevaros las manos a la cabeza y gritar!

P.D.2: Rafael, la página como comento antes, no es tan compleja como para necesitar estas bestialidades, es más cosas de la forma de trabajar.. que es de las peores. La web es para un cliente y como ves comento bastante cosas feas por lo que prefiero reservarme el nombre de la empresa y su página, espero que lo comprendais.

Un saludo comunidad.

Rafael · #5 (**permalink**) 17/07/2013, 07:12

Suerte en tu búsqueda, estoy impresionado y siento compasión de tí

Es increíble que en la otra empresa sean tan descuidados.

Bueno, esperemos que alguien tenga conocimiento de tal herramienta. Si luego la encuentras estaría interesante que la compartas. Saludos.

pzin · #6 (**permalink**) 17/07/2013, 07:33

Cita:

Iniciado por Rafael

Me gustaría ver esta página tan compleja, y por qué la necesidad de estilos tan particulares.

Si intentas estilizar forosdelweb pasa un poco de lo mismo, no tan extremo, aunque tampoco se queda corto.

Supongo que en su caso será más extremo, porque tiene más clases que se repiten y usan muy pocos identificadores. Que poniéndolos ya se solventaría gran parte de su problema.

La verdad que yo también te compadezco. Y aún así demuestras una actitud muy correcta.

Buscando encontré estos calculadores de especificidad:

Uno bonito: http://specificity.keegan.st
Uno para batallar: http://css-specificity.webapp-prototypes.appspot.com

Al menos te puede servir para comparar selectores si tienes problemas con alguno.

Rafael · #7 (**permalink**) 17/07/2013, 07:39

Hum. El primero está muy interesante.