Bruge noget af stylesheet?

Tags:    css

<< < 12 > >>
Hejsa

Hvis man har en css-fil med masser af klasser, og selektors, men et andet sted ønsker at bruge 5-10 af de klasser uden at bruge alt fra stylesheetet er der vel ikke andet for end at splitte det op eller kopiere over i et andet stylesheet?

Fx. en fil med body-definition med en background, som man ikke ønsker at bruge, men vil bruge rigtigt mange af de andre klasser der er i css'en?
Så jeg kan sige bruge klasse xx fra fil yyy.css?



12 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 2 karma
Sorter efter stemmer Sorter efter dato
Tror du leder efter https://github.com/Shandem/ClientDependency hvis du vil have bedre performance, også en god compiler til sass/less, men du leder efter https://github.com/Shandem/ClientDependency/wiki/Composite-Files

Altså nærmest som Dan anbefaler bare at @import vil koste endnu et request til serveren, der typisk vil være dyrere end at fyre et en yui-reset clases på og skrive skidtet igen i samme CSS fil så der over hele sitet kun vil være et cachet stylesheet.

Men kig på ovenstående github for optimal performce minified/gziped/composite-files men tag samtidigt at kigge på sass/scss, der kan du løse det vha få variabler.

/J





Nej du kan ikke dynamisk hive en del af en stylesheet ud ( ikke via frontend ) uden, at hente hele css filen.

En ting du dog kan overveje er, at opdele dit css i mindre css filer og hente dem ind. enten via link eller via @import direkte i css'en.



Ja du kan godt bruge xx fra yyy.css men hvis du har en anden class der hedder xx som fx ligger i qqq.css så vælger den xx fra qqq.css hvis qqq.css loades senere end yyy.css.

Men qqq.css vil ikke overskrive men tilføje eller ændre.
Det vil sige, at hvis xx fra yyy.css har en background: property, men xx fra qqq.css ikke har, så vil den stadig have en background, hvis du ikke angiver background: none; i qqq.css.

Men ellers må du jo bare definere forskellige classes.

- Lidt forvirrende, men forstår du?



Det er i forbindelse med noget optimering jeg gerne vil lave hos en kunde.
Skal lave noget der præsenterer noget data, og noget der kan kopierer det kode der laver det data.
Altså en side der viser noget, med mit eget css på som ligger lokalt.
Dette skal så kopieres ind i noget andet, der bruger nogle data der ligger i et andet program.
Derfor bliver stierne anderledes for præsentation til det der skal kopieres fra.
For at gøre det nemmere for mig selv ville jeg slippe for at kopiere det css fra deres stylesheets og filer over til mig selv for at kunne bruge dem i min, og når jeg så skal lave koden de skal kopiere er det præcis samme kode, bare med andre stier til indholdet.

Problemet er så at hvis jeg bruger deres css direkte, så er der fx en background på deres body, som jeg ikke skal have med, og flere forskellige af sådan nogle ting som jeg ikke ønsker at bruge.



Ved ikke om du kan bruge det til noget men du kan godt lave dynamiske CSS stylesheets, men kun vha. php/asp/js osv.

Men det er nok ikke den bedste vej at tage, men anyways...

Et simpelt PHP eksempel:
INDEX.PHP:
Fold kodeboks ind/udHTML kode 

CSS.PHP:
Fold kodeboks ind/udPHP kode 


(ikke testet)



Indlæg senest redigeret d. 30.04.2013 23:17 af Bruger #12793
Jah Jokke du har også misforstået hvad det er han vil. Han har noget CSS i en fil, som han vil bruge et andet sted. Men han vil ikke loade hele filen fordi den indeholder noget CSS som han ikke vil bruge.



Indlæg senest redigeret d. 02.05.2013 14:04 af Bruger #17081
Tror lige jeg prøver at forklare igen for tyder ikke på jeg var klar nok i mine formuleringer :D

Min kunde A
har fået udviklet et system til noget til deres hjemmeside af producent B (inkl. stylesheet).
Jeg skal så lave noget der kan vise næsten det samme som på deres hjemmeside, og så til sidst kopieres ind i systemet leveret af producent B.

Løsning hidtil:
Jeg skal præsentere nogle data så de ligner det der er på deres hjemmeside.
Derfor er der kopieret billeder over til vores server (fordi vi skal bruge delbider hvor deres er samlet i større dele som ikke passer ind), og har kopieret meget af deres css for at kunne få det til at ligne den lille bid på deres side som vi skal ligge data ind i.

Når vi har præsenteret data, trykker de på en knap hvor vi laver stort set samme kode, blot hvor billedadresser til vores servers lokale billeder og classes bliver erstattet af det som der bruges i det system kunden har.
De kan nu kopiere data ind i producent B's system og opdatere en del af deres hjemmeside med vores data der passer ind i det format som de har lavet.

Det hele er lavet i xslt fordi de data vi får er xml.
Derfor laves en xslt fil til præsentation på vores side, og endnu en til når de vil have det ind i producents B's system.

Min tanke var så at jeg kunne referere til deres stylesheet på deres hjemmeside og dermed bruge det samme kode som vi har kopieret, men problemet er at de 30% vi ikke bruger sætter background, placeringer, paddings etc. på en masse elementer som ødelægger vores.
Derfor det ville være lækkert hvis jeg kunne sige jeg vil bruge class xyz fra det stylesheet uden at inkludere hele stylesheetet.

Det var for at skulle slippe for at vedligeholde vores, og at meget af koden ville kunne vedligeholdes i takt med deres hjemmeside, men det er ikke rigtigt muligt. Ihvertfald ikke på en meget nem hurtig måde hvor vi kan skrive class="http:/www.kundeside.dk/content/sources/stylesheet1.css.classname". Så tit skal det heller ikke rettes, men hvis der var en nem smart måde at gøre det på så kunne det lige så godt komme med i løsningen så vi ikke skulle rette til når hjemmesiden blev opdateret.



@Dan>> det vil han netop også kunne som du beskriver ved at have et enkelt stylesheet med det "fælles" og et med alt det unødvendige, og i sin C#

For hele sitet:
BundleManager.CreateCssBundle("MyControl",
new CssFile("~/Css/fælles.css"),
new CssFile("~/Css/altMuligtAndet.css"));


Den afgrænsede:
BundleManager.CreateCssBundle("MyControl",
new CssFile("~/Css/fælles.css"));

@Csharper >> ok, så er det lidt en anden opgave.




@Jokke
Kender det godt, men desværre kan jeg ikke gøre det når de er andres css jeg gerne vil have med, og desuden så er det projekt det skal bruges i ikke så ny version .NET så jeg kan kun lege med det derhjemme.



Du kan evt. hente css'en ind og overskrive den.



<< < 12 > >>
t