Codereview please [27/32]

Курсы §15. Сетки
1

Буду благодарен.

HTML 
<body>
    <div class="header">
		<header class="boxed"><p>Header</p></header>
    </div>
    <div class="menu">
    	<nav class="boxed"><p>Menu</p></nav>
    </div>

    <div class="promos">
    	<div class="group boxed">
    		<div class="promo promo-one"><p>Promo 1</p></div>
    		<div class="promo promo-two"><p>Promo 2</p></div>
    	</div>
    </div>

    <div class="main-content boxed">
    	<aside class="left"><p>Left</p></aside>
    	<aside class="right"><p>Right</p></aside>
    	<main><p>Main</p></main>
    </div>

    <div class="footer">
    	<footer class="boxed"><p>Footer</p></footer>
    </div>
</body>
CSS 
/* =============
//  #Global
*/

/* =============
//  ##Reset
*/

html,
body,
p {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;
  font-family: "Arial", sans-serif;
  font-size: 10px;
  color: white;
}

/* =============
// ##Hack
*/

.group:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

/* =============
// ##Global
*/

p {
  padding: 5px;
}

.boxed {
  margin: 0 50px;
}

/* =============
// #Header
*/

.header {
  background-color: #34495e;
  padding: 10px 0;
}

header {
  background-color: #c0392b;
  min-height: 35px;
}

/* =============
// #Nav
*/

.menu {
  background-color: #3498DB;
}

nav {
  min-height: 35px;
}

/* =============
// #Promos
*/

.promos {
  padding: 10px 0;
  background-color: #34495e;
}

.promo {
  background-color: #c0392b;
  width: calc(100%/2 - 5px);
  min-height: 60px;
}

.promo-one {
  float: left;
}

.promo-two {
  float: right;
}

/* =============
// #Main content
*/

.main-content {
  padding: 10px 0;
}

aside, main {
  background-color: #3498db;
  min-height: 110px;
}

aside {
  width: 70px;
}

aside.left {
  float:left;
}

aside.right {
  float: right;
}

main {
  margin: 0 80px;
}

/* =============
// #Footer
*/

.footer {
  background-color: #34495e;
}

footer {
  min-height: 35px;
}

/*
  Используемые цвета:
  #34495e – мокрый асфальт
  #c0392b – красный
  #3498db – синий
*/
2

С моей точки зрения, здесь неправильно употреблены теги HTML5. Если уж говорить о header, main, footer, то:

  1. <main></main> нужно оборачивать, начиная от div.menu до div.footer, не включая последний. <main> - это основное содержание страницы. Т.е. на любой странице есть тогда хедер, футер и, по-идее, всё остальное, между ними - <main>. А так у Вас <main> - только какой-то малюсенький блочок, а что тогда всё остальное между header и footer?
  2. Считаю, что абсолютно неправильно использован тег <aside>. <aside> - это вот: тыц;
  3. Путаница может возникнуть с одинаковым названием тега и класса, которые, однако, относятся к разным элементам: тогда логичнее было бы назвать header class="page-header"> - к примеру. Равно как и div.promoS и div.promO - можно запутаться при коррекции кода.
  4. before и after - это псевдоэлементы, на сегодняшний день псевдоэлементы присоединяются в селекторе с помощью :: - в этом их отличие от псевдоклассов, которые разделяются одинарным двоеточием.
  5. Лучше не использовать селекторы типа aside.right - почему не написать просто .right?
  6. И уж совсем не нужно стилизовать с одноимёнными тегами и классами - и путаница, и приоритет разный. На простых вещах это незаметно, а на сложных будут большие проблемы “почему не работает”.
3

Благодарю за feedback!

В качестве контраргументов:
1.1) main и aside имеют в основном семантическую ценность, что есть достаточно субъективно. Даже в рекомендациях W3C и WHATWG по этому поводу написано по разному.

Today, we have a new structural element to learn: <main> According to the recent W3C specification:

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
Authors must not include more than one main element in a document.
Authors must not include the main element as a child of an article, aside, footer, header or nav element.

1.2)

The WHATWG definition of <main> differs from the W3C version in that the element has no meaning. It’s merely a styling hook (like a <div> with a new name) and represents its children.

The main element can be used as a container for the dominant contents of another element. It represents its children.

2.1) <aside> это не таков как его описывают на webref, но и не таков каким я его себе представлял

3.1) До изучения БЭМа еще не дошел, а с неймингом всегда проблемы :slight_smile:

4.1) Спасибо за замечание. Код для группы я тупо скопировал из css-tricks. Судя по тому что статья 2017 года, и в коде приписка IE 8 and up мне кажется, что так задумано ставить одни двоеточия.

5.1) Чтобы не запутаться, какой именно right я имею в виду. Это могли быть промо :slight_smile: Короче, найминг хромает, это да.

Спасибо, за замечания!