Optimera CSS i grundteman

Utseende
#1

I original CSS filen för ert tema så får ni i ett test med csslint.net 0 fel/varningar, när man kör er andra css-fil så får ni 0 fel men 999 varningar, gissar att csslint stannar där och varningarna är egentligen än fler.

Hade varit kul att se att ni tog ställning till att optimera bort dubbletter, !importants och adjoining classes och de andra varningarna som man får upp när man testar er CSS i Fabrikk 1.4.

Skulle det inte till och med vara så att man kunde undvika att behöva skriva över viss css om ni byggde in inställningar i systemet?

Att temat i sin grund inte hade styrande css utan att man tänkte optimering ifrån grunden och undvek att styla element utan man gick efter initial html/css och att man låter kunden css:a vid eventuella behov, t.ex att om nåt är initialt vänsterställt, font-weight, font-style, låta dessa element vara det, detta borde i sin tur innebära att man inte får dubbletter/trippla css-regler, så som det kan bli idag, om man nu inte bygger inställningar för det i admin som sagt.

2 gillningar
#2

Hej
Vad är den andra CSS-filen och hur gör jag för att optimera bort dubbletter, limportants och adjoining?

/Per

1 gillning
#3

Hej Per, Textalks tema ser ut att ha två css-filer om man kollar i inspekt element, vissa har CSS:1 Sedan har du andra regler som då faller inom en andra fil. Dessa två ägs av Textalk och du kommer inte åt dem.

Sedan har du din egna css-fil under Utseende > Tema > Redigera Tema > Stil > Egen CSS, detta blir den tredje css-filen till temat.

I vissa fall så finns en och samma css-regel under CSS:1 och deras som jag refererar till som andra CSS-fil med olika inställningar alternativt bildar en dubblett. Vill du göra ytterligare en regel i utseende så blir det ju tre regler för ett och samma element.

Vilket i vårt tycke inte blir optimerat.

1 gillning
#4

Hej igen Per,

Här kan du se ett exempel på css som kan ses som ooptimerat skriven, om jag själv inte missat nåt rent tekniskt. Enligt hur jag ser det borde man skrivit en max-width eller gjort en inställning i systemet som låter kunden sätta en max-width på sin sida alternativt lämnat inställningen orörd och då blir den 100% i width som ett förslag, med möjlighet för inställning för startsida, artikelgruppsida, artikelsida, egna sidor och kassan. då det kan finnas olika behov för olika bredder, systemet har redan inbyggda klasser för dessa sidor så detta är idag fullt möjligt att genomföra.

Klassen .container, den har fått width:er för varje tänkt width med avdrag för paddingen. Detta skulle förslagsvis satts med en max-width istället för en width och max-width: auto som du kan se på bilden. Sen hade den satta paddingen gett fyllnad i kant för att ge marginal till sidan av din device (desktop/tablet/mobile). Då sköter det sig själv.

Här ser du dessutom att css:1 och :6 som är deras två filer skriver samma sak, med andra ord dubbletter.

Så istället för dessa 5 regler så kunde man satt tex, ( den översta i bild är ju dessutom min egna skrivna regeln ):

.container{
width:100%;
max-width:1200px;
margin:0 auto;
padding: 0 15px
}

1 gillning
#5

Hej,
Att vi har flera olika CSS-filer som laddas in med kod som skriver över varandra är hur vårat system och teman är uppbyggda och är generellt inget som vi kommer ändra som det ser ut idag.

Om det är så att ni är oroliga över att detta skulle påverka laddningstiden eller “uppbyggnadstiden” där sidans olika script och externa filer laddas in så ska det inte påverkas. Alla våra butiker använder sedan en tid tillbaka SSR (Server side rendering) där butikens tema cachas. På så sätt är detta inget som ska påverka laddningstiden i butiken.

Är det så att ni har problem med att något i butiken visas fel eller har andra frågor specifikt till eran butik så tycker jag att ni ska maila oss så tar vi självklart och kollar vidare på detta.

Med vänliga hälsningar
Andreas

Textalk Webshop
shop@textalk.se
+46 31 14 33 14

#6

Hej Andreas,

Vad är det för cache:ningstid på dessa filer? Vi har ju väldigt många återkommande kunder och det kan ju då påverka även om det kanske inte är något nämnvärt enligt er. Redan påtalat för er om ert filarkiv som har kort cache-tid.

Optimering handlar inte enbart om laddtider, det handlar även om en tydlighet och enkelheten att kunna jobba i ert admin eller om man behöver css:a. Det ligger ju i alla era 4 000 butikers intresse att er css är så enkelt skriven som möjligt, att inte behöva skriva över, sätta ytterligare !importants och att spara tid genom att man enkelt kan göra grundläggande inställningar redan i admin.

Inställningar i admin som leder till att man undviker behov av att skriva över under Stil / Egen CSS är val av flera fonter, font-storlek för body och h-taggar? Er font-inställning lägger fonten generellt på alla element i temat, ofta vill man ha två olika för body och h-taggar. Olika font-storlekar för desktop/tablet/mobile är en annan möjlighet som kunde finnas.

Av dessa anledningar hade det varit intressant om ni vore lyhörda att justera dessa varningar och fundera på att bygga in fler inställningar för utseendet i admin.

2 gillningar