im new in css and BEM, im trying to create a small web app using this BEM naming convention and two questions about my code related with BEM.
-
I use a page block to take all user screen and the page__body, page__header and page__selection elements to display content inside this block. is correct use those block elements nested? I mean for example, in the html code i created page__selection for position the tag regard that is a page__content. I feel like I am creating a dependency between block elements instead of a block-element relationships.
-
BEM let you create blocks that you can reused so i created list block because use a lot flexbox display. But i think this produces too many clases and make my code sematically hard to understand what do your think?
HTML CODE
<!DOCTYPE html>
<html class="page">
<head>
<meta charset="utf-8" />
<title>a title</title>
<link rel="stylesheet" href="css/style.css"/>
<!--adapt width of screen-->
<meta name="viewport" content="width=width-device, initial_scale=1.0" />
</head>
<body class="page__body">
<header class="page__header">
titleHeader
</header>
<div class="page__content list list--flex-direction--row">
<aside class="page__selection list">
<div class="list__list-items list ">
List of name list
</div>
<div class="list__list-buttons list list--flex-direction--row ">
<div class="button button--background-color--green">
create
</div>
<div class="button button--background-color--green">
remove
</div>
</div>
</aside>
<main class="page__show-list-content list list--background-color--brown">
Main list
</main>
</div>
<footer>Contact </footer>
</body>
</html>
CSS CODE
/*Principal block that represent principal page*/
.page {
width:100%;
height:100%;
}
/*Elements used for geometry*/
.page__body {
width:100%;
min-height:100%;
height:100%;
margin:0;
}
.page__selection {
width: 25%;
height: 100%;
}
.page__header {
width: 100%;
height: 5%;
background-color:aquamarine;
}
.page__content {
width: 100%;
height: 85%;
}
.page__selection {
width: 25%;
height: 100%;
}
.page__show-list-content {
width: 75%;
height: 100%;
}
/*Second block represent a list that containt elements*/
.list {
display: flex;
flex-direction: column;
}
.list__list-items {
width:100%;
height:80%;
background-color:gray;
}
.list__list-buttons {
width:100%;
height:20%;
background-color:red;
}
.list--flex-direction--row {
flex-direction:row;
}
.list--background-color--brown {
background-color: brown;
}
/*Third block represent a button*/
.button {
font-family: Arial, sans-serif;
text-align: center;
border: 1px solid black;
box-sizing:border-box;
width:fit-content;
height:fit-content;
}
.button--background-color--green {
background-color:green;
}
For the first question i tried official BEM site but has simple examples that dont help about nested elements and position those respect a block.
You need to sign in to view this answers
Leave feedback about this