1: "Boilerplate" modellen
NB! CSS koden skal selvfølgelig formateres ordentligt, og ikke på én linje som her :)
CSS koder som man bruger igen og igen - ofte kaldet 'boilerplate' kode - kan gemmes i en css fil for sig, og importeres i starten af sitets egen css fil med @import "boilerplate.css";
Browseren læser den som om koden står i starten af din css fil.
Det vil typisk være:
- Reset kode:
- enten en simple * selector med margin:0; padding:0; og ofte box-sizing:border-box;
- eller måske en mere udførlig reset - se fx bitsofco.de/a-look-at-css-resets-in-2018/
- Hvis man bruger en * reset, får man brug for luft mellem p-tags, fx med p{padding-bottom:1em;}
- Responsive images med img{width:100%; height:auto;}
- ..og måske andre kode stumper efter behov, som fx for responsive YouTube videos.
Hvis man vil, kan man i sin boilerplate inkludere nogle classes for Flexbox eller CSS Grids. Fx:
.flex{display:flex;}
.flex1{flex:1;}
.flex2{flex:2;}
Så kan man give html elementerne de relevante classes.
Det kan være nemmere på denne måde - men ikke nødvendigvis.
Hvis man fx vil give alle nav li'erne flex:1;, er det unødvendig at give dem alle class="flex1". Det ville være bedre at bruge nav li{flex:1;} , og ramme dem alle på én gang.
