Witam,

Dzisiaj chciałbym zająć się tematyką rozmów kwalifikacyjnych na stanowisko Frontend Developera. Kilka takich przeszedłem i chciałbym się z Tobą podzielić pytaniami (a także rozwiązaniami) jakie mogą paść an rozmowie kwalifikacyjnej w zakresie CSS. Do dzieła!

Co jest lepsze: Pisanie selektorów osobno (lub prawie osobno) do każdego elementu, czy też dodanie klasy nadrzędnej i zagnieżdżanie selektorów wewnątrz struktury?

Powinniśmy unikać nadmiernego zagnieżdżania selektorów. Załóżmy że mamy nawigację która ma strukturę:

<nav class="navigation">
    <ul class="navigation__list">
        <li>
            <a href="#" class="navigation__link">Pierwszy link</a>
        </li>
        <li>
            <a href="#" class="navigation__link">Drugi link</a>
        </li>
    </ul> 
</nav>

Żeby ostylować linki zawarte w strukturze moglibyśmy wpaść na pomysł by napisać takie style dla linków:

.navigation{
    ul{
        li{
            .navigation__link{
                display: block;
                width: 100%;
            }
        }
    }
}

Jednak do nie jest dobry pomysł gdyż selektor powstały dzięki takiej strukturze będzie miał postać:

.navigation ul li a {
    //...
}

Takie coś nie tylko zwiększyłoby rozmiar wynikowy pliku css, ale także zwolniłoby zastosowywanie tych styli przez przeglądarkę. Gdyż ona parsując CSS „po arabsku” – od prawej do lewej. Czyli najpierw szuka elementu z klasą navigation-link, potem wychodzi wyżej i szuka tego elementu który ma rodzica li, potem ul i tak dalej. Drugim minusem takiej metody jest mała przenośność takich styli. Style są uzależnione od struktury. Próba nadpisania elementu z klasą navigation-link wymaga w tym wypadku użycia important co samo w sobie nie jest dobrą praktyką. Dużo lepszym pomysłem byłoby napisanie selektora który obejmował by tylko navigation-link wykorzystując strukturę klas i możliwości SCSSa:

.navigation{
    &__list{
        // some code
    }
    &__link {
        display: block;
        width: 100%;
    }
}

Jak zrobić responsywny kwadrat w CSS?

Padding jest liczony z szerokości elementu, czyli jeżeli napiszemy coś takiego to powinien wyjść nam kwadrat.

.square{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

 

Jak uruchomić wykorzystywanie karty graficznej przy przeglądaniu strony internetowej:

Akceleracje sprzętową możemy uruchomić na stronie wykorzystując m.in:

transform: translate3d(0,0,0);

 

Jakie znasz jednostki w css oprócz pikseli i procentów?

  • vh – viewport height => aktualna wysokość ekranu
  • vw – viewport width => aktualna szerokość ekranu
  • em – mnożnik font-size od najbliższego parenta który ma ustawiony font-size w pikselach
  • rem – mnożnik font-size z html
  • pt – punkty
  • cm – centymetry

 

Czy jest możliwe przekazanie treści z HTML do CSS? 

Tak. Można to zrobić wstawiając w atrybucie tekst, a następnie używając go w before/after jako content:

<td data-translation="here we go again"><td>
td {
    &:before{
        content: attr(data-translation);
    }
}

Artykuł będzie aktualizowany na bieżąco jak mi coś do głowy wpadnie 🙂