Permalänk
Medlem

Strukturera CSS - Wordpress

Hej!

Håller på mycket med kodning och Wordpress på fritiden. Det största problemet jag har är att cssn känns så grötig till slut. Vad har ni för tips för att hålla det så strukturerat som möjligt? Just nu blir det oftast så att när jag lägger in nya css-regler så lägger jag dem bara överst hela tiden.

Bästa av allt hade varit om det gick att ha flera olika .css dokument där man delar in varje sida för sin webbplats och därefter sätts den ihop till en och komprimerar slutfilen automatiskt.

Hur gör ni?

Permalänk
Medlem

Less/sass? Då kan du separera allt I olika filer och bygga och minifiera ihop dom när du är färdig

Skickades från m.sweclockers.com

Permalänk
Medlem

Det här är intressant.
Har själv suttit en del och hela tiden försökt jobba fram en bra struktur som jag är nöjd med.

Det finns ju ett par olika "namnstrukturer" för css.
Den jag tycker är bekvämast (och enda jag kört med iofs) är ABEM (https://css-tricks.com/abem-useful-adaptation-bem/), som är en avknoppning av BEM (http://getbem.com/).

ABEM går alltså ut på att man delar upp din struktur i tre olika nivåer.
Organismer, molekyler och atomer.
Sen har vardera struktur tre typer av "namn" eller vad vi ska kalla det.
Block, element och modifierare.

Läs igenom båda länkarna ovan så får du bättre koll Lite svårt att förklara

Man har alltså inte ett dokument för vardera "siddokument" eller vad vi ska kalla det.
Utan man delar in CSS'en i ett flertal filer och sedan bygger man upp sin struktur via det.

Sen använder jag LESS för det hela.

Såhär ser strukturen ut för mitt nuvarande wp projekt

i style.less länkar jag bara ihop alla less-filerna. Som sedan kompileras till en .css.

Såhär ser alltså min style.less ut

@import "globals.less"; @import "materialColor.less"; @import "mixins.less"; @import "materialElements.less"; @import "./organism/o-block.less"; @import "./organism/o-element.less"; @import "./organism/o-modifier.less"; @import "./molecule/m-block.less"; @import "./molecule/m-element.less"; @import "./molecule/m-modifier.less"; @import "./atom/a-block.less"; @import "./atom/a-element.less"; @import "./atom/a-modifier.less"; @import "modifier.less"; @import "mediaQueries.less"; // Dev @import "./dev/dev.less";

Visa signatur
Permalänk
Medlem

Hej tack för svaren än så länge! Ska definitivt spana in detta. Är less att föredra framför sass?

Och går det att använda dessa verktyg om man arbetar mot en Wordpress som ligger på ett webbhotell eller måste det vara lokalt på datorn?

Permalänk
Medlem

Skulle säga sass om jag inte hade kunnat någon av dom.
Det ska fungera.
Det enda du måste göra är att kompilera om din less/sass till css.

Vad använder du för editor?

Visa signatur
Permalänk
Medlem
Skrivet av linsjb:

Skulle säga sass om jag inte hade kunnat någon av dom.
Det ska fungera.
Det enda du måste göra är att kompilera om din less/sass till css.

Vad använder du för editor?

Använder vs code

Permalänk
Medlem
Skrivet av eldidy:

Använder vs code

Okej Vet inte vad det finns för paket till det.
Men till Atom (som jag själv använder) finns det paket som kan kompilera less/sass automatiskt när man sparar. Riktigt smutt
Finns helt säkert till vs code också

Visa signatur
Permalänk
Medlem

Jag rekommenderar också SASS för större projekt när du arbetar lokalt.

En annan sak att tänka på är bl.a WordPress "best practice" när det kommer till CSS. T.ex

Ha en tydligt och lättöverskådlig CSS.

/**
* #.# Section title
*
* Description of section, whether or not it has media queries, etc.
*/

/* This is a comment about this selector */
.enklass,
.enklass div,
.tvåklass div,
.treklass div p {
din CSS
}

Kolla bl.a quotes och commenting.
https://make.wordpress.org/core/handbook/best-practices/codin...

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem

Tack för alla svar än så länge!

Har dock svårt att bestämma mig om man ska sikta på sass eller less.. Efter jag googlat en del verkar det vara väldigt delade meningar.. :/

Permalänk
Medlem
Skrivet av eldidy:

Tack för alla svar än så länge!

Har dock svårt att bestämma mig om man ska sikta på sass eller less.. Efter jag googlat en del verkar det vara väldigt delade meningar.. :/

Kör SASS. Det är en större standard.

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem
Skrivet av Florrpan:

Kör SASS. Det är en större standard.

Ok kör på det, tack!

Permalänk
Medlem
Skrivet av Florrpan:

Kör SASS. Det är en större standard.

En ny liten följdfråga.. Verksr som att man även behöver ett program för sass? gulp / grunt / webpack eller vad ska man ha?

Kör Windows 10 och har vs code som editor.

Permalänk
Medlem
Skrivet av eldidy:

En ny liten följdfråga.. Verksr som att man även behöver ett program för sass? gulp / grunt / webpack eller vad ska man ha?

Kör Windows 10 och har vs code som editor.

SASS / LESS behöver en kompilator, ja. Men jag har aldrig installerat GULP/GRUNT paketen. Så mycket strul med NODE.js, om det inte är något du vill hålla på med för större projekt.

Jag använder Koala som automatiskt exporterar din SASS dit du vill, som du vill.
http://koala-app.com/

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem

@Florrpan: Tack det för tipset, koala ser enkelt och bra ut