20/20 100% но корректен ли код

Курсы §11. Позиционирование
1

Интересует, насколько корректен данный код. Я сперва один вертикальный кусочек абсолютно позиционирую, а потом остальные двигую влево, уже не затрагивая высоту.

html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {
width: 50px;
height: 10px;
position:absolute;
left:20px;
top:190px;
}

.h2 {
left:80px;
top:170px;
}

.h3 {
width: 40px;
left:200px;
top:210px;
}

/* вертикальные элементы */
.v {
width: 10px;
height: 50px;
position:absolute;
left:20px;
top:170px;
}

.v2 {
left:60px;
}
.v3 {
left:100px;
}

.v4 {
left:140px;
}

.v5 {
left:180px;
}
.v6 {
left:200px;
}
/* уголки */
.corner-top {
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
position:absolute;
top:170px;
left:150px;
}

.corner-bottom {
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
position:absolute;
top:190px;
left:150px;
}

/* лого */
.logo {
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
position:absolute;
top:80px;
left:87px;
}

1 лайк
2

А у меня вот так.Тоже 100%
html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {
width: 50px;
height: 10px;
position:absolute;

}
.h1{

bottom:80px;
left:80px;}

.h2{

bottom:40px;
left:200px;
width: 40px;}

.h3 {

bottom:60px;
left:20px;}

/* вертикальные элементы */
.v {
width: 10px;
height: 50px;
position:absolute;

}

/* уголки */
.corner-top {
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
position:absolute;
bottom:70px;
left:150px
}

.corner-bottom {
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
position:absolute;
bottom:50px;
left:150px;
}

/* лого */
.logo {
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
position:absolute;
bottom:116px;
left:87px;

}
.v1{bottom:40px;
left:20px;}
.v2{bottom:40px;
left:60px;}
.v3{bottom:40px;
left:100px;}
.v4{bottom:40px;
left:140px;}
.v5{bottom:40px;
left:180px;}
.v6{bottom:40px;
left:200px;}

3

Повторяющуюся координату bottom:40px; почему не вынесли в правило для .v { … } ?

4

не обратил внимания т.к .индикатор показывал 100%

5

Индикатор отображает только визуальное соответствие.

6 
.scene *{position:absolute;}
.h1{top:190px;left:20px;}
.h2{bottom:80px;left:80px;}
.h3{top:210px;right:20px;}
.v{top:170px;}
.v1{left:20px;}
.v2{left:60px;}
.v3{left:100px;}
.v4{left:140px;}
.v5{left:180px;}
.v6{left:200px;}
.corner-top{bottom:70px;right:80px}
.corner-bottom{bottom:50px;right:80px;}