How to structure media queries in Sass

Sass logo

Practically every site now is built with at least a nod to responsive web design. The way we structure these responsive styles has a direct relation to how complex the project will be to maintain and edit in the future as updates are made and the project grows in size.

Despite this, it seems as though a widely accepted approach for how and where to structure these responsive styles is yet to be adopted consistently by developers. Although nowhere near as bad as 'the old days' of CSS, before preprocessors and naming methodologies, this is causing an inconsistent and often messy approach to structuring the responsive styles for elements.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Jamie Murphy is a Budapest-based frontend developer and CRO consultant.