The Breakpoint CSS-JS “Hack” – do not define breakpoints in JS

This content originally appeared on DEV Community and was authored by David Lorenz

This trick is a best practice trick. Knowing that this is a best practice I thought this is a common thing but apparently it is not as widespread as I thought it would be.

So let me share it with you.

Do not redefine your breakpoints in JavaScript/TypeScript

I am assuming you are using either native CSS or SASS for your development so let's use SASS for my code snippets now.

Assume your breakpoints are defined as follows:

mobile => max-width: 599.99px
tablet => min-width: 600px

Enter fullscreen mode Exit fullscreen mode

Now what some people do is redefining those values in JS. But you can simply read the current breakpoint directly from CSS. Also you can pass all breakpoints through CSS as Single Source of Truth for UI ♥️

The trick is to use the :before in combination with content :

@media screen and (max-width: 599.99px) {
  body::before {
   content: "mobile";
  }
}

@media screen and (min-width: 600px) {
  body::before {
   content: "tablet";
  }
}

Enter fullscreen mode Exit fullscreen mode

You can access this in JS via getComputedStyle(document.body, 'before').content and it would give you e.g. "mobile" or "tablet" here. So the only thing left to do is to remove the quotes like so:

const breakpoint = 
  getComputedStyle(
    document.body, 
    'before'
  )
  .content
  .replace(/"/g, '');

Enter fullscreen mode Exit fullscreen mode

Now if you want to have all definitions from CSS you could do something like this:

.media-queries::before {
  display: none;
  content: "mobile=(max-width: 599.99px);tablet=(min-width: 600px)";
}

Enter fullscreen mode Exit fullscreen mode

Now you can read that content and use actually matchMedia or whatever you want but the important part is to always have the Design in CSS and not duplicated in JS.

Here is an actual demo you can check out:
https://codesandbox.io/s/reading-media-queries-bps-from-css-06zjh?file=/index.html

This content originally appeared on DEV Community and was authored by David Lorenz

Print Share Comment Cite Upload Translate Updates

APA

David Lorenz | Sciencx (2021-02-11T10:21:40+00:00) The Breakpoint CSS-JS “Hack” – do not define breakpoints in JS. Retrieved from https://www.scien.cx/2021/02/11/the-breakpoint-css-js-hack-do-not-define-breakpoints-in-js/

MLA

" » The Breakpoint CSS-JS “Hack” – do not define breakpoints in JS." David Lorenz | Sciencx - Thursday February 11, 2021, https://www.scien.cx/2021/02/11/the-breakpoint-css-js-hack-do-not-define-breakpoints-in-js/

HARVARD

David Lorenz | Sciencx Thursday February 11, 2021 » The Breakpoint CSS-JS “Hack” – do not define breakpoints in JS., viewed ,<https://www.scien.cx/2021/02/11/the-breakpoint-css-js-hack-do-not-define-breakpoints-in-js/>

VANCOUVER

David Lorenz | Sciencx - » The Breakpoint CSS-JS “Hack” – do not define breakpoints in JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/11/the-breakpoint-css-js-hack-do-not-define-breakpoints-in-js/

CHICAGO

" » The Breakpoint CSS-JS “Hack” – do not define breakpoints in JS." David Lorenz | Sciencx - Accessed . https://www.scien.cx/2021/02/11/the-breakpoint-css-js-hack-do-not-define-breakpoints-in-js/

IEEE

" » The Breakpoint CSS-JS “Hack” – do not define breakpoints in JS." David Lorenz | Sciencx [Online]. Available: https://www.scien.cx/2021/02/11/the-breakpoint-css-js-hack-do-not-define-breakpoints-in-js/. [Accessed: ]

rf:citation

» The Breakpoint CSS-JS “Hack” – do not define breakpoints in JS | David Lorenz | Sciencx | https://www.scien.cx/2021/02/11/the-breakpoint-css-js-hack-do-not-define-breakpoints-in-js/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Do not redefine your breakpoints in JavaScript/TypeScript

Related Posts