It would be pretty cool if we could do this someday in CSS. The best idea for it that I've come across is to define it in a <meta> tag in the <head>. That way (perhaps) CSS could use it and JS could use it. Like window.matchMedia(nameOfMyMediaQuery) or @media (nameOfMyMediaQuery) { }. But since we can't, Sass has our back. Now the question is, how do we name them?
In Sass, the @mixin would look something like this:
@mixin breakpoint($point) {
@if $point == papa-bear {
@media (max-width: 1600px) { @content; }
}
@else if $point == mama-bear {
@media (max-width: 1250px) { @content; }
}
@else if $point == baby-bear {
@media (max-width: 650px) { @content; }
}
}
And you'd use it like:
.module {
width: 25%;
@include breakpoint(baby-bear) {
width: 100%;
}
}
Although in reality I prefer something like "bp" just because it's shorter and you need to type it all the time. Which is why "+" would be so ideal instead of "@include". But I digress. Or you could go Brandon Mathis style:
$name1: 320px;
$name2: 500px;
$name3: 600px;
$name4: 992px;
@mixin at-least($device-width) {
@media screen and (min-width: $device-width) {
@content
}
}
@mixin until($device-width) {
@media screen and (max-width: $device-width - 1) {
@content
}
}
The names should avoid actual numbers. The point here is to assign a name with abstracted meaning, so the numbers can change but the names stay the same. I'd avoid device names like "iPad" or whatever too, because that just sets up bad expectations and will date itself quickly.
Better are naming schemes that suggest relationships between the names themselves. Where one is obviously bigger or smaller than another. Of course this is assuming width queries, which are certainly the most common. But of course your media queries could be different or more complex, and the naming scheme should represent that.
Here's some ideas:
baby-bear
mama-bear
papa-bear
straw-house
stick-house
brick-house
private
corporal
sergeant
captain
major
lieutenant
colonel
general
alpha
beta
gamma
delta
epsilon
very-small
small
medium
large
very-large
-
--
---
----
------
>-<
[---]
<----->
seed
seedling
sprout
plant
pebble
stone
rock
boulder
pawn
knight
queen
king
bishop
archbishop
cardinal
pope
eddard
catelyn
robb
sansa
arya
bran
rickon
knife
dagger
scimitar
claidmore
A
B
C
D
E
From Vince Speelman
lil-bowow
eminem
jay-z
krs-one
rick-ross
From James Nowland
matryoshka-doll
the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-the-one-inside-matryoshka-doll
From Philip Brown
michael
jermaine
jackie
marlon
tito
From Rob Stinogle
gandalf-the-gray
gandalf-the-white
From Darby Brown
stewie
brian
chris
lois
peter
(I leave out Meg)
Got some other ideas?
Naming Media Queries is a post from CSS-Tricks
via CSS-Tricks http://css-tricks.com/naming-media-queries/
Comentaris
Publica un comentari a l'entrada