CSS ​

Ons framework bij voorkeur is Tailwind. We proberen deze tool dan ook ten volle te gebruiken maar voegen een aantal regels toe om alles naar onze hand te zetten en beter onderhoudbaar te maken.

Alles in scss files plaatsen en gebruik maken van @apply ​

Met uitzondering van structuur! Structuur kan in in de html worden geplaatst. Structuur omvat alles omtrent alignering, padding en margins.

Geen duplicate styling ​

Als alles goed zit qua structuur en componenten dan hoef je in principe nooit duplicate styling te schrijven.

De verschillende states van een element apart plaatsen ​

We nemen een button als voorbeeld. Veelal wil je hier een hover, active, disabled, ... state stylen.

Tailwind voorziet classes om dit mee te doen hover:.... Deze classes kunnen nogal verloren gaan in de massa classes.

Wij schrijven deze voluit als volgt:

button {
    &:hover {
        @apply ...
    }

    &:active {
        @apply ...
    }
}

Geen gewone css gebruiken ​

Zeker niet bovenaan op een blade file of inline met style attribute.

Vermijd !important tenzij het echt niet anders kan ​

Goeie structuur in je styling zal het gebruik hiervan beperken.

Classes bij componenten en ids bij unieke elementen ​

Unieke elementen zijn bijvoorbeeld pagina's. Components moeten dan weer classes zijn omdat deze meerdere malen kunnen voorkomen op een pagina.

Background images enkel decoratief gebruiken ​

Gebruik steeds object-fit in combinatie met een img-tag om de afbeelding te schalen in hun parent tag.

Bij maken van componenten, geen margins of paddings aan de buitenkant ​

Deze worden toegevoegd in de sections waarin de componenten worden geplaatst. Dit zorgt ervoor dat de componenten flexibel inzetbaar zijn.