What are CSS Media Queries?
W3 Schools has a good definition:
The @media rule is used to define different style rules for different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called media queries.
Media queries look at the capability of the device, and can be used to check many things, such as:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
- and much more
So, in short, media queries are used to set different CSS based on the window size. They are commonly used to specify minimum widths to float an element, when to switch from inline-block to block, and specify image widths.
Adaptive vs Responsive Design
It’s imperative to note the difference between “adaptive” and “responsive” in design. Most companies say they are looking for a candidate that understands/works in responsive design. Really, what they are looking for is for someone to make sure their sites work and look correct on various screen sizes. There are benefits to both approaches, but more often websites employ adaptive techniques. The easiest, fastest way to understand the difference in adaptive/responsive design is through these awesome GIFs:
9 GIFs That Show Responsive vs Adaptive Design
Is it Really !important?
If you work in CSS often, you probably know what !important is. CSS is processed like we would read a book, one line at a time. Subsequent lines replace the previous, so this:
/* font-size will be 30px */
p {
font-size: 12px;
}
p {
font-size: 30px;
}
/* Not a good practice. */
Would set the p tag’s font-size as 30px. However, if you put !important before the semicolon in the first declaration, it will process that last.
/* font-size will be 12px */
p {
font-size: 12px !important;
}
p {
font-size: 30px;
}
/* Not a good practice. */
So the font-size would now be 12px, even though the 30px comes later in the document. This is a very basic (and borderline silly) example, but it’s easy for CSS beginners to get carried away with !importants. More likely than not, !importants are used as a quick fix because proper selectors were not used in the first place. This example is oversimplified, but in the real world, when you have a CSS file that is 1000s of lines long,
It’s similar to putting a spare tire on your car after you run over a nail; It “works,” and looks similar, but it is not the same as replacing it with a standard tire. It is not meant to be a long term solution.
In my opinion, the only time it is appropriate to use !important is if you are attempting to overwrite a plugin or theme’s CSS, and you discover that your stylesheet is being loaded before theirs. That way, you won’t be overwriting someone else’s code (and will be able to run updates), but you are still making it your own.
Where Should Media Queries Live?
There are various ways to write your queries, but they should always be at the end of your CSS document, so they load last and are kept together. Since media queries take up processing time, it’s good to try to not have multiple queries that could be combined.
/* Mobile-First */
p {
font-size: 14px;
}
.sidebar {
display: none;
}
@media (min-width: 600px) {
p {
font-size: 12px;
}
.sidebar {
display: block;
}
}