Ábhar
Is uirlis iontach é Flexbox chun bloat CSS a laghdú, agus tá roinnt siúcra ionsuite ann chun déileáil le rudaí mar ord foinse agus ailíniú. Ach ní thairgeann sé aon chabhair chun an mhatamaitic a chruthú a chruthaíonn méideanna colún agus gáitéir. Mar a deir go leor saineolaithe arís agus arís eile: Tá Flexbox go deas, ach ní córas eangaí é.
Ba cheart dúinn Flexbox a úsáid, ach níor cheart dúinn na bunchoincheapa taobh thiar de chórais eangaí a tharraing muid amach as ‘ré GeoCities’ an dearaidh a scriosadh:
- Déan colúin comhréireach le rud éigin
- Úsáid gáitéir chomhsheasmhacha le linn do dhearaidh
Is féidir linn ceann de na córais eangaí Flexbox iomadúla atá ann a úsáid, ach go hionraic ar fad, tá na stíleanna taobh thiar díobh seo mar an gcéanna le greillí snámhphointe-bhunaithe den chuid is mó. Ní chuireann údair ach taispeáint: flex leis an gcoimeádán, mar aon le roinnt ranganna cúntóra a ghéilleann airíonna Flexbox (mar shampla, rang mar .grid-ingearach-ailíniú-lár is obfuscation de ailíniú-míreanna: lár).
Is é an t-aon difríocht atá ann, anois tá na colúin ‘flexed’, rud a chiallaíonn go bhfaighimid an siúcra sin a luaigh mé níos luaithe. Ach ní réitíonn sé seo na príomhfhadhbanna atá roimh ghreillí inniu: tá córais ghreille fós ag aschur tonna bloat CSS, agus tá na greillí fós leadránach.
- 25 teimpléad láithreán gréasáin den scoth
An fhadhb le greillí
Is gnách go ndéanann údair eangaí pacáistí ollmhóra CSS a dháileadh ar féidir leo fritháireamh, ordú foinse, ailíniú agus méid a athrú de réir mhéid treallach na feiste. Tá siad ag brath ar gzip chun cuid den damáiste a mhaolú, ach ní fhaigheann sé seo ar fad. Cad a tharlóidh mura bhfuil na gnéithe breise sin de dhíth ort?
Ag glacadh leis go dtugann an creat atá á úsáid agat faoi láthair meascáin eangaí, b’fhéidir gurb é an réiteach is fearr ná iad sin a fhoghlaim agus do cholúin féin a chumadh. Is beag an toradh a bhíonn air seo, ach cuireann sé do ghreillí go codáin agus ní thairgeann sé go leor soghluaisteachta duit idir creataí éagsúla.
Ar aghaidh go dtí an dara heagrán. Tá dearthóirí faoi ghlas meabhrach chun a gcuid cinntí go léir a dhéanamh bunaithe ar mheascán áirithe de cholúin atá ar cóimhéid. Mar thoradh air sin, tá an t-idirlíon ar fad ag tosú ag doiléir le chéile i gcruach ’ar fhón póca; Comhcheangail 1/12 colún ar dystopia aon rud eile.
Flexbox tugtha isteach flex-fhás, a shaor beagán dúinn. Anois is féidir linn méideanna a shocrú a bhreathnaíonn go maith agus an spás atá fágtha a líonadh le heilimint sínte, ach an ndéanann gáitéir líneáil go comhsheasmhach ar fud an leathanaigh? An bhfuil réimsí ábhair leagtha amach le comhréireanna de chineál ar bith i gcuimhne, nó an bhfuilimid ar ais díreach chun é a sciathán?
Cuir isteach an dragan
Tá an réiteach ar an dá fhadhb seo fillte i bhfeidhm ar a dtugtar post-seangán. Is féidir breiseáin PostCSS a úsáid le raon uirlisí tógála cosúil le mála gréasáin, gulp nó go simplí an líne ordaithe. meascann seangán gan uaim i CSS plain (nó aon réamhphróiseálaí) le API mealltach simplí a cheiltíonn an iliomad intinn-bhog calc foirmlí. Éilíonn sé dhá pharaiméadar cosúil le meascán chun raidhse de mhéideanna atá furasta le greille a fháil.
D’fhéadfadh sampla é seo a dhéanamh níos soiléire: leithead: méideanna (1/2) faigh (1) tuairisceáin calc (99.99% * 1/2 - (30px - 30px * 1/2)). Lig dúinn é seo a bhriseadh síos:
- méideanna () is liosta méideanna spás-scartha é. Is féidir iad seo a bheith mar aon teaglaim de mhéideanna éagsúla: uimhreacha seasta i bhfoirm faid bhailí CSS (px, em, %); codáin nó uimhreacha snámhphointe (a fhilleann cibé rud atá fágtha, sans uimhreacha seasta); agus uathoibríoch eochairfhocail (a fhilleann cibé méid atá fágtha, codáin sans agus uimhreacha seasta)
- pluck () Is innéacs 1-bhunaithe é a fhaigheann méid atá furasta le greille ó do liosta. Mar sin méideanna (1px 2px 3px) a fháil (2) ar ais 2px
- Tá an calc tá an fhoirmle méid cairdiúil don ghreille
Faighimid an leithead do gach colún i ngreille dhá cholún le gáitéar 30px amháin eatarthu:
.grid {taispeáint: flex; fillte-fillte: timfhilleadh; } .half {width: méideanna (1/2) faigh (1); / * tuairisceáin calc (99.99% * 1/2 - (30px - 30px * 1/2)) * / margin-right: 30px; / / * cuireann gáitéar ar thaobh na láimhe deise de gach colún * /} .half: tosaíonn nth-child (2n + 2) {/ * ag an 2ú heilimint agus tosaíonn sé ag comhaireamh faoi 2s * / margin-right: 0 ; / * baintear an gáitéar deireanach as gach ró * /}
Tugann sé seo an chumhacht do dhearthóirí na méideanna seo a úsáid cibé áit is cuí leo, ach tumfaidh siad níos doimhne.
méideanna (100px 1/2) a fháil (1) tuairisceáin 100px. Simplí go leor, ach cén fáth go mbeadh orainn seangÚn a úsáid le filleadh 100px ? Beimid ag teacht chuige sin i gceann soicind.
méideanna (100px 1/2) a fháil (2) tuairisceáin calc ((99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)). Íosa Críost. tá seangán ag fáil amach méid iomlán na n-uimhreacha seasta, agus ag filleadh ansin 1/2 de gach a bhfuil fágtha - ar bhealach atá neamhdhíobhálach don ghreille.
Is féidir linn iad seo a úsáid calc foirmlí chun eangach a chruthú le 100px colún agus a dó 1/2 colúin mar sin (beidh mé ag fágáil an .grid stíleanna chun crainn a shábháil, ach déan cinnte iad a áireamh i do chód):
.fixed-size {width: méideanna (100px 1/2) faigh (1); filleann / * 100px (tá a fhios agam go bhfuil an chuma air go bhfuil sé amaideach ach bí liom ar feadh beagán níos faide) * / margin-right: 30px; } .half {width: méideanna (100px 1/2) faigh (2); / * tuairisceáin calc ((99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * / margin-right: 30px; } .half: nth-child (3n + 3) {margin-right: 0; }
Anois is féidir linn roinnt méideanna nach féidir a bhaint amach roimhe seo a fháil, ach níl sé ró-sholúbtha fós agus féadann muid go leor scríbhneoireachta a dhéanamh agus muid ag déileáil le go leor méideanna.
Lúbáil réamhphróiseálaí
Ní bhíonn réamhphróiseálaithe agus PostCSS i gcónaí - go háirithe nuair a bhíonn comhréir saincheaptha i gceist. Ar ámharaí an tsaoil, tá API ant-chairdiúil don réamhphróiseálaí. Is féidir linn parsálaí PostCSS cosúil le postssss-scss a úsáid le breiseán PreCSS, ach úsáideann an cur chuige seo go leor breiseán PostCSS neamhchríochnaithe / neamh-choimeádta a mhaisíonn feidhmiúlacht Sass ’go dona. Fuair mé gurb é an sreabhadh oibre is fearr ná:
- Úsáid réamhphróiseálaí tapa cosúil le nód-sass chun féachaint in.scss chun amach.css
- Úsáid PostCSS chun féachaint amach.css chun deiridh.css
- nasc> chun deiridh.css i do mharcáil
Tugann sé seo an chuid is fearr de chomhréir réamhphróiseálaí duit leis na breiseáin PostCSS go léir a theastaíonn ó do chroí.
Anois le haghaidh an stuif fionnuar. Is iondúil go mbíonn bealach ag réamhphróiseálaithe líon sonraithe uaireanta a lúbadh agus atriall a sholáthar:
@for $ i ó 1 trí 3 {ábhar: $ i; // ábhar ar ais: 1; ábhar: 2; ábhar: 3; }
Le beagán eolais ar réamhphróiseálaithe, is féidir leat tosú ag úsáid seangáin ar bhealaí an-suimiúla ...
$ méideanna: 100px 1/2 1/2; $ gutter: 30px; $ fad: fad ($ méideanna); .column {margin-right: $ gutter; @for $ i ó 1 trí $ fad {&: nth-child (# {$ length} n + # {$ i}) {width: faigh méideanna ($ méideanna) ($ i) gáitéar ($ gutter); }} &: nth-leanbh (# {$ length} n + # {$ length}) {margin-right: 0; }}
Anois timfhilleann ár gcolúin meánmhéide go sraitheanna nua gan marcáil bhreise. Téigh ar aghaidh agus tinker timpeall leis an gcód seo. Bain triail as méideanna éagsúla, gáitéir, agus méideanna nua a chur leis (cosúil le 100px auto 100px).
Is patrún an-choitianta é seo le seangán, mar sin táim fillte i réadmhaoin a oibríonn le CSS CSS freisin:
.grid {giniúint-eangach: méideanna (100px 1/2 1/2); / * Is féidir leat roghanna breise a rith, ach níl pluck () de dhíth a thuilleadh. * /}
Go leor roghanna
Tá an naoú greillí iontach nuair a bhíonn méid agus líon na n-eilimintí atá le pasáil ar eolas agat, ach uaireanta beidh tú ag iarraidh coimeádán a chruthú agus gan ach roinnt eilimintí randamacha a dhumpáil ann. Sna cásanna seo, corrlach diúltach is iad greillí an geall is fearr atá agat. Níl ort ach pas a fháil corrlach diúltach seangÚn mar sin:
.grid {margin: 0 -15px; } .column {width: méideanna (1/3) faigh (1) eangach (corrlach diúltach); corrlach: 0 15px; }
Conclúid
Ní raibh sna samplaí seo ach spléachadh beag bídeach ar na rudaí fuara ar fad is féidir le post-seangán a dhéanamh. Tá cúpla paraiméadar roghnach níos mó aige agus go leor de láimhseáil tuairisciúil earráide, ach is fíorchumhacht duit féin é.
Is iad uirlisí ‘balbh’ nach dtugann ach beagán sonraí ar ais na huirlisí is fearr i gcónaí, toisc go gcuireann siad an chumhacht ar ais i lámha an fhorbróra. Is é sin an rud a dearadh post-seangán a dhéanamh. Má tá spéis agat, téigh chuig corysimmons.github.io/postcss-ant le haghaidh roinnt taispeántas taispeána aghaidhe agus docanna milis.
Foilsíodh an t-alt seo ar dtús in eagrán 286 de net magazine, é a cheannach anseo.
