Media queries

Existen varias formas de organizar los media queries en tus estilos, todas con sus ventajas y desventajas, una de las más comunes es dejar todos los media queries al final del código.

.elemento {
    width: 100%;
}

.otro-elemento {
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    .elemento {
        width: 50%;
    }

    .otro-elemento {
        font-size: 18px;
    }
}

Esto esta bien si estas haciendo CSS puro, pero a medida que crece tu código, más complejo va a ser para ti encontrar dichos media queries e incluso puede que los repitas.

En el caso de que uses un pre-procesador (lo cual debes de hacer), puedes hacer uso de @importdentro de los media queries y así dividir todo en distintos documentos, sin excederse claro.

Stylus

@media screen and (min-width: 768px)
    @import 'nombre-tablet.styl'

@media screen and (min-width: 1080px)
    @import 'nombre-escritorio.styl'

Sass

@media screen and (min-width: 768px) {
    @import 'nombre-tablet.scss';
}

@media screen and (min-width: 1080px) {
    @import 'nombre-escritorio.scss';
}

Less

@media screen and (min-width: 768px) {
    @import 'nombre-tablet.less';
}

@media screen and (min-width: 1080px) {
    @import 'nombre-escritorio.less';
}

No es necesario crear un documento por cada media query que exista, de hecho eso se puede convertir en un caos a la larga, hay que ser simples, tres documentos pueden bastar para el proyecto, cada uno con más media queries correspondientes a su dispositivo.

[IMAGEN - DISTINTOS DOCUMENTOS]

Lo que yo hago es hacer el uso del @import al igual que colocar un media query justo después de cada selector (algo que podemos hacer gracias a los pre-procesadores), es decir, que una vez que tengo definidos mis documentos (Teléfonos, Tablets, Escritorio) cada selector que existe, viene acompañado de su media query correspondiente.

Stylus

// DOCUMENTO - TELÉFONOS

.elemento
    padding 10px

    @media screen and (min-width 360px)
        padding 15px

    @media screen and (min-width 412px)
        padding 20px

Sass

// DOCUMENTO - TABLETS

.elemento {
    width: 50%:

    @media screen and (min-width 800px) {
        width: 33%;
    }

    @media screen and (min-width 900px) {
        width: 20%;
    }

}

Less

// DOCUMENTO - ESCRITORIO

.elemento {
    color: red;

    @media screen and (min-width: 1100px) {
        color: green;
    }

    @media screen and (min-width: 1300px) {
        color: blue;
    }

}

Se todo esto puede parecer un poco complejo en un principio, pero te invito a que lo pongas en práctica y te des cuenta de lo sencillo que es.

La desventaja de usar @import es que puede que repliques código sin darte cuenta al tener distintos documentos para cada dispositivo, así que ten cuidado con ello.