ugrás a tartalomhoz

Rendezett CSS

unregistered · 2016. Ápr. 22. (P), 13.42
Sziasztok!

Olyan kérdésem van hogy ki hogyan építi fel és rendezi a CSS fájlját (fájlait)?

Azért kérdezem mert most megláttam egy 8 éves munkám és elképedtem hogy milyen rosszul volt felépítve, olvashatatlan volt és logikátlan (legalábbis mai fejjel) és elbizonytalanodtam hogy újabb 8 év után hogy fogok visszatekinteni a mai állapotra.

Próbáltam a témában keresgélni, de igazából nem találtam olyan ajálásokat mint például a html-nél van (html,head,body), talán a legjobb ez volt: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Readable_CSS de itt is csak különböző technikákat mutatja be, de nem konkrét ajánlást.

Én ezt a "verziót" használom:


p.valami {
    width: 50px;
    height: 50px;
    color: black;
}
És úgy tagolom a css fájlon belül hogy:


/*- GLOBÁLIS ÉRTÉKEK -*/

body {
}

img {
}

a {
}

p {
}

h1 {
}

/*- STRUKTÚRA -*/

div.fejlec {
}

div.tartalom {
}

    div.tartalom.baloldal {
    }
    
    div.tartalom.jobboldal {
    }

div.lablec {
}

    div.lablec.oldalterkep {
    }

/*- FEJLEC DIVEN BELÜLI ELEMEK -*/

a.menulinkek {
}

/*- TARTALOM DIVEN BELÜLI ELEMEK -*/

p.tartalom {
}

a.tartalom {
}

h1.tartalom {
}


/*- LABLEC DIVEN BELÜLI ELEMEK -*/

h1.lablec {
}

a.lablec {
}
Most például ezt néztem hogy sok oldalnak a css fájljában egy például p elemen belül abc sorrendben vannak a tulajdonságok (míg én például "fontossági" sorrendbe rakom ami mondjuk elég szubjektív):


p {
    color: black;
    height: 20px;
    margin: 5px;
    width: 10px;
}
Szóval akinek csak van kedve írja ide hogy ő hogyan csinálja vagy hogyan javasolja mert most ez nagyon érdekel hogy erre miért nincs egy "szabvány".
‹ Javascript sor törlés nem működik ( .parent().remove() ) Oldal alját nem fixen követő div [megoldva] ›
 ■
1

Rendezettség

orionstar · 2016. Ápr. 22. (P), 16.51
Preprocesszorokat használok általában LESS, ritkán SASS, néhány projekt OOCSS/SMACSS/BEM, a többi érzésre. Az olyan projektek amik nem OOCSS logika szerint épülnek fel ott parent-child viszony szerint nest-elek max három szint mélységig, ha vanilla CSS-ről beszélünk, akkor az egymás alá tartozó parent-child-okat betabolom...

	#header {
		margin-bottom: @defaultFontSize * 4;

		line-height: @defaultFontSize * 2.5;
		font-size: @defaultFontSize;

		ul {
			margin: 0;

			padding: 0;
		}

			li {
				display: block;

				margin: 0;

				list-style: none;

				float: left;

				a {
					display: block;
				}
			}
	}
A tulajdonságokat típus szerint csoportosítom, minden típus után üres sor, amit lehet összevonok egybe (pl.: margin, padding, border stb.). Típus szerint: méretek, doboz főbb jellemzői (display, float, position), szöveg beállítások, egyéb... Régebbi projekteknél a dobozmodell szerint belülről kifelé haladtam vagy fordítva. Nálam is szinte 2 évente változik a stílus, a 2008 óta viszont tabolom a kódot. Más fejlesztőnél ilyet ritkán látok, ez nem valami elterjedt. A build fájlom az oldal elemeit az alábbi sorrendben húzza be : normalize/reset, bootstrap (ha kell), minden oldalamnál használt szabályok, fejléc, tartalmi részek, lábléc, végül ezek variációi (pl.: ha több fejléc típus van, akkor az alap fejléctípus kiegészítései stb.)

A példakódoddal több problémát is látok: felesleges definiálni egy class-ra, hogy az div, ha ez szükséges akkor logikailag hibás a kód; egy HTML oldalon nem ajánlott több h1-es elem, a HTML5 óta a lehetőség meg van rá, de a Google nem igazán szereti. Elég furcsa ez a megoldás nálad, hogy nem a parentek alapján állítod a stílust az adott elemen felüli tageken, hanem a tag kap egy extra class-t, hogy mi a parentje... Egyébként manapság nem ajánlott a tag-ek szerinti szelektor használata, hanem minden class (lásd OOCSS/BEM stb.), hogy ne legyen precendencia és teljesítmény probléma, mondjuk ezt én sem tartom be mint a mintakódban láthatod. :D
3

Class

unregistered · 2016. Ápr. 25. (H), 09.59
A fenti kódom millió sebből vérzik, ott csak szemléltetni akartam a tagolást, nem a kódot magát, például h1 csak egy van html-ben, csak ha eltér oldalanként akkor az így szoktam megadni.
A másik hogy parentek alapján állítom például a p.tartalom elöl még hiányzik hogy div.tartalom (ami amúgy meg #tartalom szokott lenni), de mondom ezt csak tagoltság miatt írtam.

Ami viszont érdekesebb, hogy akkor elvileg mindehol class-t kell használni?

Maradva akkor a mostani példánál: #tartalom p { } helyett, #tartalom p.elso { } kell legyen?
2

Ahány fejlesztő, annyi

deejayy · 2016. Ápr. 22. (P), 20.13
Ahány fejlesztő, annyi módszer, illetve cégpolicy is segíthet eldönteni, hogy hogyan csináld.

Én egyszemélyes vagyok, így próbálok valami standardet, best-practice-t követni (Enduring CSS) többé-kevésbé (de inkább kevésbé) személyre szabva., kézműves (sic!) CSS módszerrel.

Például így.
Ez persze elég Sublime-specifikus, mert van ilyen preview scrollbar oldalt.
4

Sublime

unregistered · 2016. Ápr. 25. (H), 10.02
Ez a Sublime-os jópofa, még nem láttam ilyen felhasználását, bár az alap problémát még nem oldja meg könnyebbé teszi az elkülönítését, plusz az nem teljesen elegáns hogy tele van fölösleges karakterekkel nem?
5

Feltéve, hogy használsz

deejayy · 2016. Ápr. 28. (Cs), 10.58
Feltéve, hogy használsz valamilyen utófeldolgozót, a kommentek és a fölös whitespace-ek mennek a levesbe, így a kliensnél már elegáns :)