Ygdir - Don’t put CSS conventions in the main CSS file, only imports

S10 Don’t put CSS conventions in the main CSS file, only imports

Use _trash.scss for whatever you are ashamed of. Try to keep the _trash.scss empty.

Bad

@import "_reset";

/* Settings */
@import "_s-colors";
@import "_s-variables";

/* Elements */
@import "_e-base";

/* Components */
@import "_c-block-list";
@import "_c-button";
@import "_c-toolbar";
@import "_c-validation-boxes";
@import "_c-quiz-holder";
@import "_c-quiz-question";

/* Utilities */

@import "_u-flex";
@import "_u-spacer";
@import "_u-display";


.c-quiz-holder {
    padding: 3rem;
    border: 0.1rem solid #CCC;
    box-shadow: 0 0.4rem 0 0.1rem #CCC;
    margin: 1rem 1rem 2rem;
    background: #FFF;
}

Good

@import "_reset";

/* Settings */
@import "_s-colors";
@import "_s-variables";

/* Elements */
@import "_e-base";

/* Components */
@import "_c-block-list";
@import "_c-button";
@import "_c-toolbar";
@import "_c-validation-boxes";
@import "_c-quiz-holder";
@import "_c-quiz-question";

/* Utilities */

@import "_u-flex";
@import "_u-spacer";
@import "_u-display";

/* ==========================================
    c-quiz-holder
   ========================================== */

.c-quiz-holder {
    padding: 3rem;
    border: 0.1rem solid #CCC;
    @media (-webkit-min-device-pixel-ratio: 1.3) {
    border-width: 0.05rem;
    }
    box-shadow: 0 0.4rem 0 0.1rem #CCC;
    margin: 1rem 1rem 2rem;
    background: #FFF;
}