Återkoppling

[emilfolino]

En student frågade om återkoppling på koden. Här kommer en snabb genomgång av SASS koden och hur den kan förbättras.

Användande av nesting. Nesting i SASS är bra för att kapsla in selektorer i förälder element.

Innan:

.footer {
    background-color: $background-color;
    display: inline-table;
    justify-content: space-between;
    height: 10vh;
    text-align: center;
}

.footer p,
a {
    color: $a-color;
    text-align: center;
}

Misstänker att det blev fel med , a- selektoren då den går mot alla a på sidan. Om vi säger att det är .footer a hade man kunnat skriva nedanstående:

.footer {
    background-color: $background-color;
    display: inline-table;
    justify-content: space-between;
    height: 10vh;
    text-align: center;

    p,
    a {
         color: $a-color;
         text-align: center;
    }
}

Ett bra tips är att alltid ha media-queries sist i CSS'en, då vi vill att de skriver över ursprunglig kod i de fall där querien uppfylls. I SASS kan man göra det genom att ha en media-queries.scss, som importeras som sista fil.

I main.scss filen blandas lite väl mycket. En del av koden kan flyttas till specifika moduler där den kapslas in bättre.

I filen technology.scss används nth-child(n) en del. Är nog i detta fallet bättre att ge varje box en klass kopplat till programmeringsspråk/teknik och därigenom minska beroendet på ordningen. Dessutom upprepas en del rader kod, här hade man kunnat lägga den koden i en mer generell klass. Koden ser ut på detta sättet:

.column:nth-child(1) {
    background-image: url('../../../assets/img/css.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}