[CSS] Zoeken naar duplicate classnames

[DeFeCt]

Hoi,

Ik wil in een grote css file zoeken naar duplicate classnames. Nou kan ik natuurlijk bovenaan beginnen, zoeken op de naam en kijken wat ik terug krijg maar liever laat ik dit automatisch gebeuren.

Zoals een compiler weet te vertellen dat je duplicate names gebruikt, maar dan in css zeg maar.

Weet iemand of er een tool is die dit kan?

Ik heb in TopStyle Pro gezocht maar daar niks gevonden, TopStyle kent wel een stylesweeper die de boel netjes bij elkaar zet of zelfs combineerd maar ik zou graag weten welke styles hij bij elkaar zet en wat hij heeft combineerd, daar krijg ik helaas geen feedback van.

Het gaat om stylesheets van SharePoint Portal Server en WSS en dat zijn + 1500 regels

(Zijn er trouwens mensen die veel ervaring hebben met het aanpassen van de styles in SPS en WSS? Ik heb namelijk ook nog wat vragen over classes en waarvoor ze gebruikt worden)

[André]

De CSS validator van het W3C misschien? Lijkt me dat die wel over dubbele namen gaat vallen.

http://jigsaw.w3.org/css-validator/validator-uri.html

[ Voor 24% gewijzigd door André op 22-10-2004 09:27 ]

[J_Davelaar]

Zou idd de validator eens gebruiken.

Verder:

id = voor 1 malig gebruik. Wordt vooral veel gebruikt voor de opbouw <div> van een site. .content .header .footer enz.

class = voor meermalig gebruik. Dus eigenlijk voor al je overige dingen. Opmaak texts links, enz enz.

[André]

J_Davelaar schreef op 22 oktober 2004 @ 09:38:
Zou idd de validator eens gebruiken.

Verder:

id = voor 1 malig gebruik. Wordt vooral veel gebruikt voor de opbouw <div> van een site. .content .header .footer enz.

class = voor meermalig gebruik. Dus eigenlijk voor al je overige dingen. Opmaak texts links, enz enz.

Ik denk dat hij dat wel weet, hij vraagt ook niet wat classes en id's zijn. De CCS wordt waarschijnlijk gegenereerd en die wil hij nalopen.

[DeFeCt]

De validator had ik al geprobeerd, sorry, vergeten te vermelden.

Nope die komt wel met iets terug, maar niet met dubbele classnames. Heb sowieso een beetje het idee dat die over de zeik gaat.

Vreemde meldingen als

Line: 0 Context : .ms-pvnavmidC1 a:visited
Parse Error - [empty string]

terwijl de class er als volgt uitziet

code:

.ms-pvnavmidC1 a:visited {
    width: 100px; /*set cutsom width*/
    overflow: hidden;
    text-overflow:ellipsis;
    text-decoration: none; 
    color: #003399
}

[DeFeCt]

André schreef op 22 oktober 2004 @ 09:39:
[...]
Ik denk dat hij dat wel weet, hij vraagt ook niet wat classes en id's zijn. De CCS wordt waarschijnlijk gegenereerd en die wil hij nalopen.

De CSS wordt niet gegenereerd maar is out of the box erg slecht geschreven door Microsoft, ik wil proberen met minimale inspanning de 1500+ regels terug te brengen door de styles die ze op meerdere plaatsen definieren te combineren en overbodige declaraties weg te gooien.

Nou kan ik dit door de sweeper van TopStyle laten doen, maar dan weet ik niet wat er gebeurd en dat wil ik toch wel graag weten.

[edit]

het verschil en het gebruik van classes en id's is me inderdaad bekend

[ Voor 7% gewijzigd door DeFeCt op 22-10-2004 09:47 ]

[André]

Kan het zijn dat die over de hyphen struikelt?

[DeFeCt]

André schreef op 22 oktober 2004 @ 09:47:
Kan het zijn dat die over de hyphen struikelt?

Je bedoelt de hyphen tussen text & decoration? Dat is toch valide css taal?

[xentar]

DeFeCt schreef op 22 oktober 2004 @ 09:51:
[...]

Je bedoelt de hyphen tussen text & decoration? Dat is toch valide css taal?

Ik denk dat hij doelt op de hyphen in je classname.

[DeFeCt]

xentar schreef op 22 oktober 2004 @ 09:57:
[...]Ik denk dat hij doelt op de hyphen in je classname.

In dat geval, dat is een gegeven waar ik niks aan kan veranderen.

[André]

En deze dan:

http://www.htmlhelp.com/tools/csscheck/
http://www.mariosalexandrou.com/css_validator.asp
http://www.ahfb2000.com/cssvalidator.php

Ik heb geen ervaring met deze maar je kunt het altijd proberen.

[DeFeCt]

André schreef op 22 oktober 2004 @ 10:27:
Ik heb geen ervaring met deze maar je kunt het altijd proberen.

tnx for the input!
De bovenste geeft niks bruikbaars weer, laat wel errors zien maar niet van welke class ze afkomstig zijn, de middelste is een tool die aangeschaft moet worden en de onderste linked door naar w3c.

Mijn gevoel zegt me dat ik het meer in de development tools zoals visual studio moet zoeken, maar dan moeten deze natuurlijk wel classes als zodanig herkennen.

[Michali]

Ik denk dat daar geen tool voor is. Meerdere keren styles defineren voor 1 class is namelijk gewoon legaal css. Er worden dan gewoon properties toegevoegd of overschreven. Ik denk niet dat je hier echt een directe tool voor hebt. Mischien moet je een zoeken naar een tool die aangeeft hoevaak een bepaalde string voor komt in een bestand. Die bijvoorbeeld zelf het bestand scanned en dan van ieder woord aangeeft hoevaak deze voorkomt en op welke plaatsen.

edit:

Hmm. mischien heb je hier wat aan. Ziet er niet uit maargoed...

[ Voor 17% gewijzigd door Michali op 22-10-2004 11:27 ]

[SchizoDuckie]

is het niet een idee om je css geowon door tidy heen te pleuren? Die heeft opties om html, css, etc op te schonen en classes te combinen voor zover ik weet

[Clay]

kweenie of je er wat aan hebt, maar met een scriptje zoals dit kom je een aardig end:

code:

window.onload = function() {
    var rules = document.styleSheets[0].rules;
    var select, classes;
    
    for(var i=0; i<rules.length; i++) {
        select = rules[i].selectorText;
        select.replace(/\.[a-z0-9_-]+/gi, function($1){
            ClassCounter.add($1, select);
        });
    }   ClassCounter.display();
}

ClassCounter = {
    classes:[],
    add:function(name, select) {
        if(!this.classes[name]) 
            this.classes[name] = [];
        this.classes[name].push(select);
    },
    display:function() {
        var list = document.createElement('dl');
        var title, rules;
        for(var i in this.classes) {
            title = document.createElement('dt');
            title.innerHTML = i;
            list.appendChild(title);
            rules = document.createElement('dd');
            rules.innerHTML = (''+this.classes[i]).replace(/,/g, '<br />');
            list.appendChild(rules);
        }   document.body.appendChild(list);
    }
}

Als je dat in een html'etje mikt en b.v. met een linkrel loslaat op de stylesheet van got krijg je dit overzichtje van classes en de rules die ze gebruiken:

code:

.welcome
    .welcome
.tdtopyellow
    .tdtopyellow
    A.tdtopyellow
    A.tdtopyellow:visited
    A.tdtopyellow:hover
.tdtopyellow2
    .tdtopyellow2
    A.tdtopyellow2
    A.tdtopyellow2:visited
    A.tdtopyellow2:hover
.cookiecrumblelink
    .cookiecrumblelink
    A.cookiecrumblelink
    A.cookiecrumblelink:hover
.stats
    .stats
*knip, is wel lang enzo*

[André]

Hmm, dit script zou je eventueel zo aan kunnen passen dat hij alles in een array gooit om daarna de dubbelen te checken enzo.

[DeFeCt]

Clay schreef op 22 oktober 2004 @ 12:35:
kweenie of je er wat aan...

C l a y

[Dionysus007281]

DeFeCt schreef op 22 oktober 2004 @ 09:43:
De validator had ik al geprobeerd, sorry, vergeten te vermelden.

Nope die komt wel met iets terug, maar niet met dubbele classnames. Heb sowieso een beetje het idee dat die over de zeik gaat.

Vreemde meldingen als

[...]


terwijl de class er als volgt uitziet

code:

.ms-pvnavmidC1 a:visited {
    width: 100px; /*set cutsom width*/
    overflow: hidden;
    text-overflow:ellipsis;
    text-decoration: none; 
    color: #003399
}

Misschien een ; na color: #003399 ?

[Clay]

DeFeCt schreef op 22 oktober 2004 @ 13:24:
[...]

C l a y

lol je hebt er dus wel wat aan?

[DeFeCt]

Clay schreef op 22 oktober 2004 @ 13:46:
[...]lol je hebt er dus wel wat aan?

jazeker, kijk nu welke classes dubbel in het lijstje staan, even een search met TopStyle er doorheen en easy as 1,2,3!