We Keep Coding

Media Queries or JavaScript to hide an element on certain screens

We have a section on the page that needs to be hidden on small phone screens, and appear on larger screens.
The easiest way to do it would be to use CSS media queries.
.section {
display: none;
}
#media (min-width: 900px) {
.section {
display: block;
}
}
However, this would keep the section in the DOM, thus potentially making it less efficient.
Alternatively, we could toggle the existence of the section using a state in our JavaScript framework (React in our case, but not important for the question).
My Question is: When is it better to use one, and when is it fine to use the other?

Use hover/active CSS by default on mobile devices

On desktop devices, I have designed my elements to be grayed out by default, but become colored when a user hovers over them. On mobile devices, I want them to use the hover state CSS to be colored in by default. Is it possible to do this through JavaScript?
I have lots of elements with different colors, so it would be much easier to simply trigger the state through JavaScript rather than writing new classes and adding them to the elements.

No need for JS! You can use media queries in CSS to accomplish this.
Note: I'm using Bootstrap 4's numbers for screen sizes in this example:
.element:hover {
background-color: gray
}
#media only screen and (max-width: 767px) {
.element {
background-color: gray;
}
}
Bootstrap starts medium screen sizes at 768px, hence my max width of 767. If you want, you can try it out at https://jsfiddle.net/21haxstd/

Detecting media queries via javascript and apply appropriate data-state

I need javascript #help.
I have an object(#objID) with three different data state (A B & C) (https://www.dropbox.com/s/zn19k87eu2hp8ow/data-states.jpg?dl=0)... Each state contain some css to describe the look of it..
I want to use javascript to detect media queries change and add the appropriate data state to #objID.
(ie.
if screen is under 320px then add [data-state="A"] to #objID
or if screen is between 320px and 728px then switch to [data-state="B"]
or if screen is above 1024px then switch to [data-state="C"]
)
similar to this concept..http://zerosixthree.se/detecting-media-queries-with-javascript/
but im not sure how to implement it.
Please help. Thanks

To simplify you can do something like this:
window.matchMedia("(max-width: 320px)").addListener(function() {
// Change the value of `data-state`
});
window.matchMedia("(min-width: 321px) and (max-width: 728px)").addListener(function() {
// Change the value of `data-state`
});
However you need make sure the browser supports window.matchMedia and also handles maintaining state etc to know when you've crossed from one breakpoint and into the other and identify which is active as both will trigger as you exit and enter breakpoints.
As for doing it on window.onresize this is not a very performant way to do this and you must throttle/debounce if you do it that way. Using matchMedia will only trigger when the breakpoint changes rather than continuously on resize. It also give you the benefit of keeping your CSS media breakpoints in sync with your JS.
This is a Polyfill for browsers which do not support it as mentioned and this guide might also help you.
However:
I have an object(#objID) with three different data state (A B & C).
Each state contain some css to describe the look of it..
Sounds as though you want to change the CSS styles applied to an element based on the data-state attribute, which you are going to change per breakpoint?
Correct me if I am wrong but why can't you just use media queries to change the CSS that is applied to it instead?
#media only screen and (max-width: 320px) {
/* State A */
.css-selector {
color: red;
}
}
#media only screen and (min-width: 321px) and (max-width: 728px) {
/* State B */
.css-selector {
color: green;
}
}
#media only screen and (min-width: 728px) {
/* State C */
.css-selector {
color: blue;
}
}

You need the onresize event
window.onresize = function(event) {
//...
};
The screen has two dimensions, width and height, and you describe a one-dimensional comparison, which does not give us enough information about what you want to achieve. Anyway, you can use window.innerWidth and window.innerHeight inside your onresize event.

Check width of viewport on side load, then add class to body if less than X

I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'

How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

grid layout with different grid heights using Fluid Baseline Grid

I am using this template: http://fluidbaselinegrid.com/ to create fluid grid to layout my personal site. Not all my grids are the height and I sometimes get the wrong placement.
[1].
The skills section should be on the left under Blog Post 5 and Contact should be next to skills.
Please see my site at http://vsrao.com.s3-website-us-east-1.amazonaws.com. And you should be able to access the css and html there. I would be too long to paste it in this post. Please let me know if this is bad etiquette. Also let me know if there is a better fluid grid framework that is upto date.

You can probably tackle this by applying a clear: left via an nth-child selector on your columns. Using your media-queries, you should be able to mimic 2 or 3 column layouts like so:
// 2 column layout
#media only screen and (max-width: 767px) {
.g1:nth-child(2n+1) {
clear: left;
}
}
// 3 column layout
#media only screen and (min-width: 768px) {
.g1:nth-child(3n+1) {
clear: left;
}
}
Note: You'll need to add a new media-query (max-width: 767px) so the clear on 2 column layout only gets applied to your smaller screen view.