100% Интересует чистота кода.

Курсы §14. Мастерская: декоративные элементы
1

HTML

CSS

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

body {
    width: 280px;
    min-height: 280px;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
    background: #ecf0f1;
    color: #fff;
}

.wrapper {
    width:200px;
    height: 195px;
    background: #1abc9c;
    padding: 20px;
}

.header {
  font-size: 20px;
  margin-bottom: 20px;
}

.text {
margin-bottom: 25px;
}

div.social {
   display: inline-block;
   margin-right: 5px;
}

.facebook,
.twitter,
.google {
    width: 30px;
    height: 30px;
    background: #16a085;
    background-image: url(/assets/course14/social-challenge.png);
}

.twitter {
    background-position: -30px 0;
}

.google {
    background-position: -60px 0;
}
2

Высоту блоку .wrapper нежелательно задавать, а в целом хорошо всё.

3

за исключением того, что facebook, twitter и т.д. должны быть ссылками, а не просто иконками

4

Да, правильно. Html-код картинкой не заметила.

5

Согласен с ребятами по поводу высоты блока с классом wrapper и того, что отсутствуют ссылки для соц. кнопок.
А по поводу чистоты. То мне кажется, что все свойства, которые Вы прописали для селектора
".facebook,
.twitter,
.google {
}"
можно прописать в селекторе .social. Ведь именно для этого, по идее, Вы и создали этот класс - что бы прописать в нем общие свойства всех кнопок.

1 лайк
6

еще фоновая картинка повторяющаяся. Не сильно критично наверное…