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:
  1. p.valami {  
  2.     width: 50px;  
  3.     height: 50px;  
  4.     color: black;  
  5. }  
És úgy tagolom a css fájlon belül hogy:
  1. /*- GLOBÁLIS ÉRTÉKEK -*/  
  2.   
  3. body {  
  4. }  
  5.   
  6. img {  
  7. }  
  8.   
  9. a {  
  10. }  
  11.   
  12. p {  
  13. }  
  14.   
  15. h1 {  
  16. }  
  17.   
  18. /*- STRUKTÚRA -*/  
  19.   
  20. div.fejlec {  
  21. }  
  22.   
  23. div.tartalom {  
  24. }  
  25.   
  26.     div.tartalom.baloldal {  
  27.     }  
  28.       
  29.     div.tartalom.jobboldal {  
  30.     }  
  31.   
  32. div.lablec {  
  33. }  
  34.   
  35.     div.lablec.oldalterkep {  
  36.     }  
  37.   
  38. /*- FEJLEC DIVEN BELÜLI ELEMEK -*/  
  39.   
  40. a.menulinkek {  
  41. }  
  42.   
  43. /*- TARTALOM DIVEN BELÜLI ELEMEK -*/  
  44.   
  45. p.tartalom {  
  46. }  
  47.   
  48. a.tartalom {  
  49. }  
  50.   
  51. h1.tartalom {  
  52. }  
  53.   
  54.   
  55. /*- LABLEC DIVEN BELÜLI ELEMEK -*/  
  56.   
  57. h1.lablec {  
  58. }  
  59.   
  60. a.lablec {  
  61. }  
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):
  1. p {  
  2.     color: black;  
  3.     height: 20px;  
  4.     margin: 5px;  
  5.     width: 10px;  
  6. }  
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...
  1. #header {  
  2.     margin-bottom: @defaultFontSize * 4;  
  3.   
  4.     line-height: @defaultFontSize * 2.5;  
  5.     font-size: @defaultFontSize;  
  6.   
  7.     ul {  
  8.         margin: 0;  
  9.   
  10.         padding: 0;  
  11.     }  
  12.   
  13.         li {  
  14.             display: block;  
  15.   
  16.             margin: 0;  
  17.   
  18.             list-style: none;  
  19.   
  20.             float: left;  
  21.   
  22.             a {  
  23.                 display: block;  
  24.             }  
  25.         }  
  26. }  
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 :)