Instrument vir die opwekking van CSS geraamte?

StackOverflow https://stackoverflow.com/questions/16926

  •  08-06-2019
  •  | 
  •  

Vra

My HTML is al gemerk het, gereed om dit reën CSS maak. Die probleem is dat ek moet teruggaan en uit te vind wat al my ID en klas name, sodat ek kan begin. Wat ek nodig het, is 'n instrument wat my HTML ontleed en spoeg uit 'n stylblad met al die moontlike elemente gereed om styl (miskien selfs met 'n paar gebreke). Maak so 'n instrument bestaan?

Was dit nuttig?

Oplossing

http://lab.xms.pl/css-generator/ lyk pas die beskrywing.

Ander wenke

Ek het 'n arm man se weergawe van hierdie ek gebruik het in die verlede ... dit verg jQuery en Firebug ... 

<script type="text/javascript">
    $(document).ready(function() {

        $('*[@id]').each(function() {
            console.log('#' + this.id + ' {}');
        });
        $('*[@class]').each(function() {
            $.each($(this).attr('class').split(" "), function() {
                console.log('.' + this + ' {}');
            });
        });
     });
</script>

Dit gee jou iets soos hierdie: 

#spinner {}
#log {}
#area {}
.cards {}
.dialog {}
.controller {}

As jy wil hê hulle in "natuurlike" bladsy order plaas ... 

<script type="text/javascript">
    $(document).ready(function() {
         $('*').each(function() {
             if($(this).is('[@id]')) {
                 console.log('#' + this.id + ' {}');
             }
             if($(this).is('[@class]')) {
                 $.each($(this).attr('class').split(" "), function() {
                     console.log('.' + this + ' {}');
                 });
             }
         });
     });
</script>

Ek het net laai die bladsy met wat script in daar, dan sny en plak die resultate uit Firebug ... dan natuurlik, verwyder die script:)

wat jy nodig het om die dups hand te verwyder of net gooi in 'n paar eenvoudige DUP nagaan logika met 'n kaart of skikking of iets .. een vir ID's en een vir klasse.

Wanneer ek hierdie eerste gesien het, het ek gedink "Groot vraag! Netjies antwoord, danb!"

Na 'n bietjie gedink, ek is nie so seker dit is 'n goeie idee. Dit is 'n bietjie soos die opwekking event handlers vir alle kontroles in 'n ASP.NET bladsy, of die opwekking van CRUD prosedures vir al die tafels in 'n databasis. Ek dink dit is beter om hulle te skep as dit nodig is om twee redes:

  1. Minder warboel van verklarings leë styl
  2. Minder versoeking om misbruik (of geringe gebruik) CSS deur die skryf van alles op die klas vlak eerder as die gebruik afstammeling keurders soos (#navigation ul li a).

Ek stem saam met Jon, maar ek sien nie 'n probleem * met doen wat die OP wil. Die gebruik van die script verskaf, sal jy al jou klasse en ids weet. Terwyl jy werk op jou CSS, moet jy besluit of jy behoefte om elkeen van hulle te gebruik. Aan die einde, of by die punt dat jy voel soos jy het 'n goeie hanteer op wat jy doen, loop dit deur 'n optimizer / kompressor so dit ongebruikte ID's en klasse verwyder.

* Operating aanname: Jy het óf nie skryf die oorspronklike HTML of jy dit geskryf het en later besluit dat "Sjoe CSS hier regtig lekker wees nou, ek wens ek sou begin met dit." : -)

Nie dat dit nie 'n sinvolle vraag met 'n sinvolle antwoord, maar dit impliseer vir my die soort onnodig gemerk-up HTML wat mense maak wanneer hulle nie posisionele keurders verstaan: die soort kode waar alles het 'n klas en 'n ID. 

<div id="nav">
  <ul id="nav_list">
    <li class="nav_list_item">
        <a class="navlist_item_link" href="foo">foo</a>
    </li>
    <li class="nav_list_item">
        <a class="navlist_item_link" href="bar">bar</a>
    </li>
    <li class="nav_list_item">
        <a class="navlist_item_link" href="baz">baz</a>
    </li>
  </ul>
</div>

jy kan alles verwyder, behalwe die id op die div en steeds in staat wees om alles daar stileer deur sy posisie; en natuurlik, die script sal nie jou wys al die moontlik keurders, sal dit?

Met ander woorde, 'n eng fokus op CSS as iets gedoen word om klasse en ID's is 'n bekommernis.

Hierdie blog inskrywing verwysings na iets soortgelyk aan wat jy nodig het hier .

Dit bevat 'n skakel na 'n Perl script genoem " stylizator.pl '. Dit script ontleed die html om te kyk vir moontlike CSS elemente en uitgange hulle na 'n lêer.

Nog 'n manier om dit te benader is om die id en klasname jy gebruik in jou HTML standaardiseer volgens 'n soort van naamkonvensie .

Ek het nie eens met Jon. Terwyl hierdie oplossing swak gebruik kan word in die manier waarop hy beskryf, beteken dit nie noodwendig dit sal. Enige wyse ontwikkelaar of ontwerper gaan die script gegenereer css klasse neem en trek net wat werklik nodig is in die css lêer.

Die oplossing los nog vraag die OP se.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top