Jamie Mur­phy ex­plains an ap­proach to struc­tur­ing me­dia queries in Sass to cre­ate con­sis­tent, re­us­able, self-con­tained and re­spon­sive mod­ules

net magazine - - CONTENTS - Jamie Mur­phy w: www. jamie- mur­ t: @jjmu15 job: Fron­tend de­vel­oper and CRO con­sul­tant ar­eas of ex­per­tise: Fron­tend, eCom­merce, Con­ver­sion Rate Op­ti­mi­sa­tion

Jamie Mur­phy ex­plains how to struc­ture me­dia queries in Sass

The Prob­lem

Prac­ti­cally ev­ery web­site now is built with at least some level of re­spon­sive­ness. The way we struc­ture th­ese re­spon­sive styles has a di­rect re­la­tion to how com­plex the project will be to main­tain and edit in the fu­ture as up­dates are made and the project grows in size.

De­spite this, it seems as though a widely ac­cepted ap­proach for how and where to struc­ture th­ese re­spon­sive styles is yet to be adopted con­sis­tently by de­vel­op­ers. Al­though nowhere near as bad as ‘the old days’ of CSS, be­fore pre­proces­sors and nam­ing method­olo­gies, this is caus­ing an in­con­sis­tent and of­ten messy ap­proach to struc­tur­ing the re­spon­sive styles for el­e­ments.

‘The Old Days’

To un­der­stand the prob­lem we’re fac­ing, let’s go back to the be­gin­ning. One of the rea­sons that CSS pre­proces­sors such as Sass or LESS were cre­ated in the first place is be­cause CSS can get ex­tremely messy and is fa­mously hard to main­tain. We used to find that after a while, even small web­sites had lines upon lines of CSS styles that were left in place just be­cause the de­vel­oper was un­sure if it was re­quired or the rem­nants of a re­moved fea­ture or out­dated el­e­ment that could be deleted.

Take the fol­low­ing sce­nario as an ex­am­ple:

. head­ing { back­ground: # 000000; };

.ti­tle { font- size: 16px; }; .ti­tle_s­mall { font- size: 14px; } .ti­tle_alt { font- fam­ily: sans- serif; }

Al­though you may think that it is safe to as­sume the

.ti­tle el­e­ment is the ti­tle for the .head­ing el­e­ment in this con­text, in fact you can’t ac­tu­ally be com­pletely sure that it is not used to style any other ti­tle el­e­ment in the site. Also, where is .ti­tle_alt class used and is it still re­quired or in use? You can see how even with such a sim­ple ex­am­ple it can be­come a time-con­sum­ing ex­er­cise to check all of this be­fore mak­ing changes.

Be­cause of this, lots of de­vel­op­ers would save time by adding a new class to the el­e­ment or us­ing a more com­plex CSS se­lec­tor to make the changes they de­sired, which then in turn in­creased the com­plex­ity of the CSS an­other level for the next time a change was needed.

Pre­proces­sors, Nam­ing Con vent ions and Mo du­lar CSS to the Res­cue

Thanks to the abil­ity to nest styles, use vari­ables, ex­tend other classes and more, pre­proces­sors rev­o­lu­tionised the way that we cre­ate and main­tain CSS. Un­for­tu­nately they don’t fully solve the prob­lem of messy, out­dated styles that spread and grow through­out a project as it ages like an in­fec­tion.

Along came nam­ing con­ven­tions and CSS method­olo­gies such as BEM (

in­tro­duc­tion), which when ap­plied give a much greater level of con­text to styles. When com­bined with mak­ing vari­a­tions, mod­i­fi­ca­tions and the styles of nested el­e­ments self­con­tained by us­ing CSS Mod­ules ( http://the­sass­way. com/ad­vanced/mod­u­lar-css-an-ex­am­ple) a re­ally strong way to struc­ture your styles was born. Be­low you can see how th­ese im­prove­ments can solve the prob­lems we en­coun­tered with our ear­lier code ex­am­ple:

. head­ing { back­ground: $ black; }

. head­ing__ti­tle { font- size: 16px; &. headding__ti­tle-- small { font- size: 14px; } } . post__ti­tle-- alt { font-fam­ily: sans- serif; }

It is in­stantly clear that the ti­tle styles here are specif­i­cally con­tained within the head­ing el­e­ment. You can safely re­move/edit th­ese with­out worry of af­fect­ing other el­e­ments. You can also see that the

small ti­tle was a vari­a­tion of the header ti­tle but that the alt ti­tle style was for an­other el­e­ment.

In my opinion, when fol­low­ing this com­bi­na­tion of struc­ture and nam­ing method­ol­ogy, it is fairly easy to cre­ate clean, eas­ily main­tain­able CSS styles. Con­text can quickly be gained and self-con­tained mod­ules of CSS can be copied and pasted in other projects, or amended and re­moved with ease.

It may seem as though the prob­lem of messy and un­main­tain­able code was re­solved. But as re­spon­sive de­sign be­came more and more rel­e­vant, it be­came ap­par­ent that we were re­peat­ing many

Pre­proces­sors rev­o­lu­tionised the way that we cre­ate and main­tain CSS

of our mis­takes over again and gen­er­at­ing badly struc­tured, overly com­plex ap­proaches to cre­at­ing re­spon­sive web­sites.

Solv­ing this prob­lem is where Me­dia Query Bub­bling comes into play.

Me­dia Query Bub­bling

Thanks to the men­tioned im­prove­ments in our ap­proach to cre­at­ing CSS, when­ever I in­herit or col­lab­o­rate on a project th­ese days, I rarely ex­pe­ri­ence the dread or con­cern that I was open­ing my­self up to fall into a fire of speci­ficity hell or struc­tural dis­or­gan­i­sa­tion that I used to have in those sit­u­a­tions. I now know that I can quickly find and un­der­stand rel­e­vant classes and styles thanks to nam­ing method­olo­gies and make my changes with­out unimag­in­able con­se­quences to other el­e­ments, thanks to Mod­u­lar CSS. Un­for­tu­nately one major cause of frus­tra­tion I en­counter is that

re­spon­sive styles are still in­con­sis­tently lo­cated through­out the project. They may well be con­tained within a mod­u­lar struc­ture and named ap­pro­pri­ately in a nam­ing method­ol­ogy, but project by project I see many dif­fer­ent ways that de­vel­op­ers choose to in­clude their re­spon­sive styles. Some cre­ate a sep­a­rate Sass par­tial named

_mo­bile.scss or _tablet.scss for ex­am­ple. Some place me­dia queries at the bot­tom of the rel­e­vant file in as­cend­ing or de­scend­ing or­der and oth­ers just place them ran­domly be­tween styles for other el­e­ments. With this ap­proach I find my­self tab­bing be­tween files and scrolling to the top and bot­tom of files just to gain a full un­der­stand­ing of one el­e­ment’s styles across dif­fer­ent break­points.

As you can see, there are many prob­lems with this that all com­bine to cause the de­vel­oper to spend more time work­ing on changes/amend­ments than is ac­tu­ally needed.

1. It du­pli­cates styles and makes the process of main­tain­ing and find­ing all rel­e­vant styles for a com­po­nent harder. You have to look in mul­ti­ple lo­ca­tions or files to get a com­plete pic­ture of an el­e­ment’s styles. 2. The el­e­ment is no longer self-con­tained. You

Con­sider me­dia queries to be like any other vari­a­tion of your mod­u­lar el­e­ment

can­not eas­ily re­use it in an­other project or con­fi­dently delete/amend it with­out ad­verse af­fects or lin­ger­ing code re­main­ing. 3. For each new project, time is wasted fig­ur­ing out how that project ap­proaches re­spon­sive styles. 4. Switch­ing be­tween projects be­comes harder be­cause you have to switch be­tween ap­proaches in your head. This can lead to projects ac­ci­den­tally hav­ing a mix of ap­proaches, which again leads to messy CSS.

The so­lu­tion that I like to im­ple­ment to fix this is called Me­dia Query Bub­bling. The sim­plest way to ex­plain it is to con­sider me­dia queries to be like any other vari­a­tion of your mod­u­lar el­e­ment. The same as a BEM vari­a­tion class of .head­ing__ti­tle is .head­ing__ti­tle—vari­a­tion, for ex­am­ple. This means that the me­dia query should be nested within, just like your mod­i­fy­ing classes. See the fol­low­ing code as an ex­am­ple of this:

. header { back­ground: $ black; @ me­dia only screen and (min- width: 640px) { back­ground: $white; } }

In this ex­am­ple you can clearly see in one lo­ca­tion that the back­ground for the header changes to white at 640px or higher. By self-con­tain­ing the me­dia query along with the el­e­ment’s styles, you have once again cre­ated a to­tally self-con­tained mod­ule that can be reused or edited with con­fi­dence. There is no need to cross-check a _mo­bile.scss file or search the project for other men­tions of the class to be sure you have cov­ered all break­points.

Nested Me­dia Query Bub­bling

Again, I have seen many vari­a­tions of how de­vel­op­ers choose to struc­ture the re­spon­sive styles of their el­e­ments. This should be con­sid­ered no dif­fer­ent than styling the par­ent el­e­ment and all me­dia queries and styles should be self-con­tained. See the fol­low­ing ex­am­ple:

. head­ing__ti­tle { font- size: 16px; @ me­dia only screen and (min- width: 640px) { font- size: 18px; } &. head­ing__ti­tle-- small { font- size: 14px; @ me­dia only screen and (min- width: 640px) { font- size: 16px; } } }

You can see that the font size for the head­ing__ti­tle gets big­ger when the view­port is 640px or big­ger and how the smaller vari­a­tion of the head­ing ti­tle also en­larges but is de­fined to be smaller than stan­dard. Us­ing this tech­nique, it is very im­por­tant to ap­ply the BEM method­ol­ogy strongly to en­sure you don’t end up nest­ing sev­eral lev­els deep. For ex­am­ple, en­sure that the .head­ing__ti­tle el­e­ment is a self­con­tained CSS mod­ule that is not need­lessly nested within the .head­ing el­e­ment.

Cleaner Re­spon sive St yles

By tak­ing what we learned from the ben­e­fits pro­vided by BEM and Mod­u­lar CSS and ap­ply­ing it to me­dia queries within the same struc­ture, we stop our­selves from re­peat­ing the mis­takes of our past.

By work­ing with me­dia queries in this way, you don’t have to learn a to­tally new method­ol­ogy or struc­ture for your styles. We’re ba­si­cally tak­ing the Mod­u­lar CSS ap­proach and ap­ply­ing it to our me­dia queries, which should feel fairly nat­u­ral.

We’re also cre­at­ing cleaner CSS with less du­pli­ca­tion of CSS classes across files and sav­ing de­vel­op­ment time by re­mov­ing the need to check mul­ti­ple lo­ca­tions when mak­ing amends.

Stay clean Think about how you han­dle me­dia queries to en­sure you don’t re­peat code

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.