OniWithTheHoodie
commented
1 month ago BEM (Block Element Modifier)
-
block elementen geven we een class met een naam. Als je een naam geeft zorg ervoor dat het een logische naam is. voorbeeld als het een article is geef het class naam van article.
-
Elementen die je binnen de block element nest geef je de class naam article__naam.
<article class="article">
<h2 class="article__header">header</h2>
<p class="article__text">Lorem ipsum dolor sit amet.</p>
</article>
Stel dat je meerdere van de zelfde block elementen hebt met andere stijling van elkaar. Doe dan dit voor de block elementen article--regular en article--featured zorgt dat je andere stijling kunt geven voor het hele blok.
articleheader--regular en articleheader--featured zorgt ervoor dat je specifieke elementen kunt stijlen binnen elke blok element .
<!-- Regular Article -->
<article class="article article--regular">
<h2 class="article__header article__header--regular">Regular Article Header</h2>
<p class="article__text article__text--regular">This is a regular article.</p>
</article>
<!-- Featured Article -->
<article class="article article--featured">
<h2 class="article__header article__header--featured">Featured Article Header</h2>
<p class="article__text article__text--featured">This is a featured article.</p>
</article>
CSS
/* Base block styles */
.article {
/* Default article styles */
padding: 20px;
border: 1px solid #ddd;
}
/* Modifiers for different article types */
.article--regular {
background-color: #f5f5f5;
}
.article--featured {
background-color: #ffebcc;
border-color: #ffa500;
}
/* Element styles */
.article__header {
font-size: 24px;
margin-bottom: 10px;
}
.article__text {
font-size: 16px;
color: #333;
}
/* Element modifiers for different article types */
.article__header--regular {
color: #333;
}
.article__header--featured {
color: #ff4500;
}
.article__text--regular {
color: #666;
}
.article__text--featured {
color: #000;
}
Daan645
Code conventies
html
css
Maak de css code DRY. Dus eerst de basiselementen stijlen, waarna je de classes stijlt Werk mobile-first !!!
Wanneer je meerdere objecten aanroept, er een enter tussen elk object komt
Wanneer je gebruik maakt van een @media-query gebruikt, de waarde binnen het object zet en niet onderaan het bestand. Zo moet je het dus niet doen.
maar zo:
Naamgeving
JavaScript
Commits & Pull requests
Commits
Branch
Naamgeving: Wanneer je aan een specifieke feature werkt, geef je de volgende naamgeving aan een branch.
Feature + onderwerp + eigen naam. Dus bijvoorbeeldfeature-header-driezieWanneer je een nieuwe branch wilt aanmaken, doe dit via GitHub. Dit is handiger, omdat je het anders eerst moet pushen. Dus doe dit direct via de website i.p.v GitHub Desktop
Pull request
Wanneer je een pull request maakt, benoem de volgende dingen:
Wanneer is een pull-request klaar?