ugrás a tartalomhoz

The problem with CSS pre-processors

Hidvégi Gábor · 2014. Aug. 31. (V), 17.23
Mire számítsunk a CSS előfeldolgozók használatakor?
 ■
1

Mire jó?

Hidvégi Gábor · 2014. Aug. 31. (V), 09.33
Nézegettem a LESS css leírását, de nem teljesen értem, hogy az Extend pontosan miért is jó, idézet az oldalról:

The classic use case is to avoid adding a base class. For example, if you have

.animal { background-color: black; color: white; }
and you want to have a subtype of animal which overrides the background color then you have two options, firstly change your HTML

<a class="animal bear">Bear</a>
.animal { background-color: black; color: white; }
.bear { background-color: brown; }
or have simplified html and use extend in your less. e.g.

<a class="bear">Bear</a>
.animal { background-color: black; color: white; }
.bear { &:extend(.animal); background-color: brown; }

Az első, hagyományos módszer nekem sokkal flexibilisebbnek tűnik, ráadásul a végső css is kisebb.
2

A HTML-nek csak egy

Joó Ádám · 2014. Aug. 31. (V), 17.15
A HTML-nek csak egy interfészt kell adnia, nem tartozik rá, hogy én milyen hierarchiában valósítom meg a hozzá rendelt CSS-t. Az első példád olyan, mintha egy többszörös öröklést támogató nyelvben C osztályt nem csak B-ből, hanem B-ből és A-ból származtatnám, miközben B A-ból származik.
4

Itt nem többszörös öröklést

Hidvégi Gábor · 2014. Aug. 31. (V), 18.04
Itt nem többszörös öröklést támogató nyelvről van szó, hanem HTML-ről, a classoknak pont az a lényege, hogy ha jól szétbontom a stílusdefiníciókat, a kész kódban nagyon könnyen össze tudom legózni, hogyan nézzen ki egy elem.
5

Ezt hívják többszörös

Joó Ádám · 2014. Aug. 31. (V), 18.05
Ezt hívják többszörös öröklésnek.
6

És miért jobb az, ha a

Hidvégi Gábor · 2014. Aug. 31. (V), 18.07
És miért jobb az, ha a css-ben van megvalósítva, mintha html-ben?
7

Loose coupling ;)

Joó Ádám · 2014. Aug. 31. (V), 18.14
Loose coupling ;)
8

Ezt nem teljesen értem. Ha

Hidvégi Gábor · 2014. Aug. 31. (V), 18.48
Ezt nem teljesen értem. Ha laza csatolásról van szó, akkor valószínűleg újrafelhasználható komponensekre gondolsz, például egy lapozóra. Ha az adott HTML kódrészletet classok használatával készíted el, akkor mindenképp erős csatolás lesz a html és a css fájl között (a classnevek miatt). Innentől kezdve nem mindegy, hogy a html-ben legózol, vagy css-ben, egy előfeldolgozó segítségével ragasztgatod össze a stílusdefiníciókat?
9

Nem, a laza csatolás előnye

Joó Ádám · 2014. Szep. 1. (H), 13.42
Nem, a laza csatolás előnye elsősorban nem az újrafelhasználhatóság (ez a legtöbb kódra nem igaz), hanem a könnyű módosíthatóság.

A dokumentumban nekem csak dobozaim vannak, amiket szemantikus osztálynevekkel látok el. Természetesen nem lehet őket teljesen függetleníteni a stíluslaptól, hisz azért vannak ott, hogy a stíluslapnak felületet nyújtsanak, de azzal, hogy nem kötöm a neveket a konkrét megjelenítéshez, illetve csak egy nevet használok elemenként, sokkal ritkábban kell egy grafikai módosításkor a dokumentumhoz is hozzányúlnom.

Ha összelegózol stílusokat, akkor a megjelenítés logikájának egy nagyobb részét teszed a markupba (a válogatás logikáját).

Nyilván szubjektív, hogy ki hol húzza meg a határt, én szeretem, ha HTML és a CSS minél kevesebbet tudnak egymásról, mert így sokkal kisebb az esélye, hogy egy átszervezés eltöri valamelyiket. Így ha például linkek egy listáját bekezdésbe teszem át, akkor nem kell hozzányúlnom a stílushoz, ahogy a HTML-t sem kell átnézzem, hol használok egy szülőosztályt, ha átszervezem a CSS-t.
3

Az @extend-et a CSS

Joó Ádám · 2014. Aug. 31. (V), 17.22
Az @extend-et a CSS hiányossága teszi szükségessé, a kódduplikáció, ahogy azt a szerző is írja, Gzip mellett irreleváns. A tight coupling fogalmáról és az open-closed elvről láthatóan fogalma sincs, mit jelent, csak olvasott valamit, amiről azt hiszi, illik a mondandójába.
10

Szabványos "reset"

Gixx · 2014. Szep. 3. (Sze), 16.21
Én jobban örülnék, ha lenne valamilyen szabványosított "reset", amit ha "meghívsz", akkor minden css alapbállítás nullázódik. Mint egy beépített reset.css... Lehetne ez akár @reset.
11

<link rel="stylesheet"

Hidvégi Gábor · 2014. Szep. 3. (Sze), 16.53
<link rel="stylesheet" type="text/css" href="reset.css" />

ctrl-c + ctrl-v, még kevesebbet is kell gépelni, mintha beírnád, hogy @reset. Vagy eleve beleteszed a kezdő sablonba, és akkor még gépelni sem kell.
12

A reset.css tudtommal éppen

kuka · 2014. Szep. 3. (Sze), 16.58
A reset.css tudtommal éppen azért hasznos, mert a különböző böngészők alapbeállításai picit eltérőék. Tehát ha egy @reset direktíva csettintésre visszaállítaná az alapbeállításokat, az szerintem ugyanolyan böngészőfüggő volna mint anélkül. Vagy rosszul látom a felállást?
13

Igen.

Hidvégi Gábor · 2014. Szep. 3. (Sze), 17.28
"Mint egy beépített reset.css"
18

Na igen. Csak több reset.css

kuka · 2014. Szep. 3. (Sze), 18.19
Na igen. Csak több reset.css változat is van. Még ha az egyiket ki is kiáltod hivatalosnak, abból is jó eséllyel több verzió jelent már meg. Ha mindegyik böngésző gyártó a kiadás idején létező legfrissebb reset.css verziót építi be a böngészőjébe, akkor is fel kell készítsd a weboldalad, hogy a különböző reset.css verziókkal jól működjön.

(Jó, értem, hogy elméletileg így is kevesebb volna az eltérés mint anélkül. De az is lehet, hogy a végén @-moz-reset, @-webkit-reset és @-ms-reset változatokkal kell majd zsonglőrködünk.)
19

Hát, igen, mostanában terjed

Hidvégi Gábor · 2014. Szep. 3. (Sze), 18.28
Hát, igen, mostanában terjed a box-sizing: border-box, és nagyon nem mindegy, hogy be van-e kapcsolva minden elemre. Úgyhogy marad a jól bevált megoldás.
20

Reset alatt minden CSS

Joó Ádám · 2014. Szep. 3. (Sze), 19.28
Reset alatt minden CSS tulajdonság szabvány szerinti alapértékre állítását értjük. Ez egy teljesen objektív dolog, bármilyen eltérés bug.
21

Objektív?

Hidvégi Gábor · 2014. Szep. 3. (Sze), 20.50
Tudomásom szerint azért vannak eltérések az elemek között, mert a szabvány ezt megengedi. Ha például megnézed a font-family alapértelmezett értékét: depends on user agent, a font-size-é pedig medium (ezt is a felhasználó ügynöke határozza meg, mekkora).
22

És tényleg, amikor a magam

Joó Ádám · 2014. Szep. 3. (Sze), 20.55
És tényleg, amikor a magam reset.css-ét írtam, akkor szembesültem is ezzel, azóta jótékonyan megfeledkeztem róla. Kezdésképp illene az efféle aluldefiniáltságot felszámolni a szabványban.
23

Nehéz ügy

Hidvégi Gábor · 2014. Szep. 3. (Sze), 21.14
Ezen én is gondolkodtam, valószínűleg csak azért nem lépik meg, mert sok oldalt érinthet. Mi legyen a font-size kezdőértéke? Abszolút vagy relatív? A box-sizing alapértelmezett content-box (magyarul az első szabványos dobozmodell, CSS 1-ben találták ki, a Microsoft ellenében) értéke is egy orbitális tévedés.
14

Én is régóta álmodom erről.

Joó Ádám · 2014. Szep. 3. (Sze), 17.30
Én is régóta álmodom erről.
15

: (

Hidvégi Gábor · 2014. Szep. 3. (Sze), 17.43
Akkor nem ártana néha kikapcsolódni, nők közé járni. Úgy szebbeket lehet álmodni : )
16

Nem is tudod, mennyire igazad

Joó Ádám · 2014. Szep. 3. (Sze), 17.57
Nem is tudod, mennyire igazad van…
17

De

Hidvégi Gábor · 2014. Szep. 3. (Sze), 18.10
Dehogynem, ez épp élettapasztalat, és nem a szokásos, két pillanat alatt megcáfolható elméleteim egyike : )