Foglio di stile separato in modo programmatico in sotto-fogli di stile?

Question

Supponiamo di avere un enorme foglio di stile con un sito completo di selettori, ognuno con le sue proprietà (posizionamento, ridimensionamento, caratteri, colori, ecc ... tutti insieme) e si desidera separarli in file diversi e appropriati (es. fonts.css, colors.css, layout.css, ecc.) ..

Esistono metodi noti (automatici) per il completamento di tale attività?

Esempio:

#myid { 
display:block; 
width:100px; 
height:100px; 
border:1px solid #f00; 
background-color:#f00; 
font-size:.75em; 
color:#000; 
} 

verrebbe convertito ai 3 file seguenti:

layout.css:

#myid { 
    display:block; 
    width:100px; 
    height:100px; 
} 

color.css:

#myid { 
    border:1px solid #f00; 
    background-color:#f00; 
    color:#000; 
} 

font. css:

#myid { 
    font-size:.75em; 
} 

Il mio esempio probabilmente non utilizza le migliori convenzioni per fare ciò, ma un modo per automatizzare la separazione delle proprietà in file diversi sarebbe molto conveniente nella creazione del framework, immagino.

Answer 1

Questo dovrebbe iniziare:

#!/usr/bin/env python 
import cssutils 

PATH_TO_CSS_FILE = 'old_huge_css_file.css' 

LAYOUT = ('display', 'width', 'height', 'margin', 'padding', 
      'position', 'top', 'left', 'bottom', 'right') 
COLOR = ('color', 'background', 'border', 'background-color') 
FONTS = ('font', 'font-size') 

def strip_styles(infile_path, outfile_path, properties_to_keep): 
    stylesheet = cssutils.parseFile(infile_path) 

    for rule in stylesheet: 
     if not rule.type == rule.STYLE_RULE: 
      continue 

     [ rule.style.removeProperty(p) for p in rule.style.keys() 
      if not p in properties_to_keep ] 

    f = open(outfile_path, 'w') 
    f.write(stylesheet.cssText) 
    f.close() 

segments = (
    ('layout.css', LAYOUT), 
    ('color.css', COLOR), 
    ('fonts.css', FONTS), 
) 

for segment in segments: 
    strip_styles(PATH_TO_CSS_FILE, *segment) 

Avrete bisogno CssUtils

E ovviamente io havn't compilato tuple all'inizio di ogni possibile proprietà css. Lo lascerò come esercizio al lettore

nota: lascerà tutti i commenti nel foglio di stile anche se molti di essi non appartengono agli stili separati.

Inoltre, tutti gli stili non elencati nelle variabili LAYOUT, COLOR e FONTS nella parte superiore verranno filtrati.

È possibile modificare facilmente la funzione strip_styles per filtrare gli stili in queste tre variabili per creare un 4 ° foglio di stile che contenga tutti i misc. proprietà, se vi piace

Answer 2

Non conosco alcun metodo che separi automaticamente il tuo css, ma il framework CSS Blueprint ha già scomposto per te & in passato ho appena inserito i miei stili dove necessario & ha avuto cura di tutte le differenze del browser misc.

www.blueprintcss.org

Answer 3

Ho fatto due grandi progetti con stili più negli ultimi mesi.

In un caso c'erano diversi colori e stili per pagina. Nell'altro caso alcuni colori e immagini erano diversi per i gruppi target.

Ho creato un foglio di stile main.css che conteneva il posizionamento, i caratteri predefiniti, la spaziatura e tutto ciò che ci si aspetta da un foglio di stile. Quindi, per ogni gruppo target ho creato un foglio di stile in più contenente la colorazione specifica, i caratteri e le immagini (di sfondo).

Nel tuo caso, builing un quadro, vorrei almeno suggerire i seguenti componenti:

• Ripristina
• principale
• Typography

Una cosa da tenere a mente è il numero di richieste HTTP che stai facendo chiamando altri fogli di stile. Se possibile, usa meno fogli di stile possibili.

Answer 4

Rotolare il proprio. Il CSS valido non dovrebbe essere terribilmente difficile da analizzare.

• Spalato l'intero file da }
• In ciascuno di questi, quello che viene prima della { è la Spalato di selezione
• ciò che viene dopo { da ; per ottenere ogni singola regola per ogni selettore
• Valutare ogni regola e crea i tuoi file di conseguenza

Semi-pseudo codice VB.NET ...

Dim CssFile as String = System.IO.File.ReadAllText("MyFile.css") 
Dim CssRules as String() = CssFile.Split("}") 

For Each Rule as String in CssRules 
    Dim Selector as String = Rule.Substring(0, Rule.IndexOf("{")).Trim(); 
    Dim Styles as String() = Rule.Substring(Rule.IndexOf("{") + 1).Trim().Split(";"); 

    For Each Style as String in Styles 
     If Style.StartsWith("font") Then 
       ' Build your files... yada, yada, yada 
     End If 
    Next 
Next 

Answer 5

Sembra uno strumento utile, ho pensato che potrebbe già esistere, ma non ho trovato nulla.

Penso che probabilmente avresti bisogno di crearlo. Per fare ciò puoi probabilmente sfruttare una delle tante librerie o programmi di parser CSS esistenti che sono disponibili.

Una ricerca rapida rivela più in .NET, Java, Ruby, ecc. Ci sono anche domande su StackOverflow.

Answer 6

Ecco come lo farei:

1. Copiare il grande foglio di stile per i 3 file.
2. Aprire ciascuno di essi e rimuovere gli stili non necessari.

Per il passaggio 2, è possibile risparmiare un sacco di tempo utilizzando la ricerca/sostituzione in un editor come Notepad ++. Ad esempio in layout.css, è possibile eseguire una ricerca regolare per ^.*background:.+$ e sostituirla con nulla. (Quindi alla fine rimuovi tutte le righe vuote.)

In teoria dovresti essere in grado di ridurlo a solo un paio di regex per file, ma Notepad ++ non sembra gradire il carattere pipe, o parentesi per quella questione . ^.*background(-color|-image)?:.+$ dovrebbe funzionare, ma non è così.

Questo non è programmatico, ma TBH nel momento in cui hai scritto il tuo codice per fare ciò che stai chiedendo potresti aver digitato i fogli di stile da zero.

Answer 7

Davvero facile stampare la propria sceneggiatura. Here è una libreria per css in ruby, sono sicuro che puoi trovarne una con qualsiasi piattaforma che usi

Answer 8

Hai una riga di comando grep? Ti interessano i commenti nell'output? Puoi fare un primo passaggio per ripulire la formattazione? Ad esempio nel tuo editor di scelta assicurati che {, } e ; siano seguiti da una nuova riga. Poi questi potrebbero ottenere si chiude:

grep -i '[{]\|[}]\|background\|border\|color' source.css > color.css 
grep -i '[{]\|[}]\|font\|letter\|line-height' source.css > font.css 
grep -v 'background\|border\|color\|font\|letter\|line-height' source.css > layout.css 

Dovrete fare, se non si vuole uno dei seguenti tag nella layout.css: outline-*, text-*, white-space, word-spacing. Questo è se il tuo css li usa. Vorrei anche dare una rapida occhiata per vedere quali tag stai effettivamente utilizzando. Ad esempio,

grep -v '[{]\|[}]' test2.css | sed -e 's/:.*$//g' | sort -u 

Answer 9

La parte facile sta analizzando i CSS. La parte difficile è classificare le diverse direttive CSS e anticipare i selettori CSS a mano corta.

CSSTidy potrebbe essere il biglietto con alcune modifiche. Non solo si è analizzare i CSS, ma sarà anche consolidare le proprietà CSS, se possibile:

http://csstidy.sourceforge.net/download.php

Answer 10

Avete pensato di utilizzare un programma che si prende cura del CSS per voi, invece di andare manualmente attraverso e la modifica di tutto te stesso? Recentemente ho iniziato a utilizzare stylizer e sono rimasto impressionato da tutte le funzioni disponibili (anche nella versione gratuita). Sebbene non divida i file CSS come vuoi per quanto posso dire.

Answer 11

* Split the entire file by } 
* In each of those, what comes before the { is the selector 
* Split what comes after { by ; to get each individual rule for each selector 
* Evaluate each rule and build your files accordingly