Испытание: взломанный котопрофайл 18/18 100% Ваши предложения-улучшения

Курсы §16. Наследование и каскадирование
1

Приветствую! Получилось довести до 100%, хотелось бы получить советы от опытных коллег, перфекционизм не излечить)
Код:
html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e !important;
border-radius: 4px;
}

.fact {
padding: 10px;
background: white !important;
}

.fact:nth-child(odd) {
background: #ecf0f1 !important;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

div .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

div .fact .value {
margin-left: 140px;
color: #34495e;
}

.albums img{
margin-top: 5px;
}

.albums img {
float: left;
margin-right: 5px !important;
}

.albums img:last-child {
margin-right: 0 !important;
}

.button {
display: block;
height: 30px !important;
margin: 5px 0 !important;
line-height: 30px;
text-align: center !important;
color: #ffffff;
border-radius: 4px;
}

.button.stroke {
background: #3498db;
}

.button.feed {
background: #2ecc71;
}

.button.startle {
background: #e74c3c;
}
div .albums.img {
margin-right: 75px;
}

Буду благодарна за конструктивную критику (:

1 лайк
2

Только два раза используется !important, свои правила дописывать нельзя.

3

Спасибо большое, кол-во !important и интересовало.)

4

Всё же пока остановлюсь на 4х !important, и так стало получше)
html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info h2, #info-title

{
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.profile div.fact {
padding: 10px;
background: white;
}

.profile .fact:nth-child(odd) {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

div.fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

div.fact .value {
margin-left: 140px;
color: #34495e;
}

.albums img {
margin-top: 5px;
}

.albums img {
float: left;
margin-right: 5px !important;
}

.albums img:last-child {
margin-right: 0 !important;
}

span.button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.profile .stroke {
background: #3498db;
}

.profile .feed {
background: #2ecc71;
}

.profile .startle {
background: #e74c3c;
}

5

Это плохая практика усиливать свойства !important там, где можно это обойти. В маленьких задачках это сильно ни на что не повлияет, а когда будут большие проекты, потом невозможно будет переопределить свойства, т.к. “перебить” можно будет только !important - аналогичными по силе. И их количество будет нарастать, как снежный ком.

6

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

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}
#info-title,
.profile .info h2{
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.profile div.fact {
padding: 10px;
background: white;
}

.profile .fact:nth-child(odd) {
background: #ecf0f1;
}

.profile .fact::after {
content: “”;
display: table;
clear: both;
}

.profile .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.profile .fact .value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;
}

#miska,
.profile .albums img {
float: left;
margin-right: 5px;
}

.profile .albums img:last-child {
margin-right: 0;
}

.profile .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.profile .stroke {
background: #3498db;
}

.profile .feed {
background: #2ecc71;
}

.profile .startle {
background: #e74c3c;
}

но можно ли было использовать такие ухищрения:
#miska,
.profile .albums img {
float: left;
margin-right: 5px;
}
??

7

А в чем вы видите ухищрение?

8

что код не усилен, а добавлен еще один селектор

9

Второй селектор усилен. А первый вы пишете отдельно и он получается в коде ниже, чем тот, который написан в html, а значит сильнее.

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

body {
    width: 550px;
    height: 300px;
    font-size: 12px;
    font-family: Tahoma, Arial, sans-serif;
}

.profile {
    padding: 5px 10px;
}

.profile img {
    display: block;
    padding: 10px;
    border: 2px solid #34495e;
    border-radius: 8px;
}

.profile .photo {
    float: left;
    width: 152px;
}

.profile .info {
    float: left;
    width: 368px;
    margin-left: 10px;
}

#info-title, .info h2 {
    margin: 0 !important;
    padding: 10px !important;
    font-weight: normal;
    font-size: 12px;
    color: #ffffff;
    background: #34495e;
    border-radius: 4px;
}

.profile div div.fact {
    padding: 10px;
    background: white;
}

.profile .fact:nth-child(odd) {
    background: #ecf0f1;
}

.fact::after {
    content: "";
    display: table;
    clear: both;
}

.profile .fact .title {
    float: left;
    width: 120px;
    text-align: right;
    color: #7f8c8d;
}

.profile .fact .value {
    margin-left: 140px;
    color: #34495e;
}

.albums {
    margin-top: 5px;
}

#miska, .albums img {
    float: left;
    margin-right: 5px;
}

.albums img:last-child {
    margin-right: 0;
}

.profile .button {
    display: block;
    height: 30px;
    margin: 5px 0;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    border-radius: 4px;
}

.photo .stroke {
    background: #3498db;
}

.photo .feed {
    background: #2ecc71;
}

.photo .startle {
    background: #e74c3c;
}

На проверку (чтобы не создавать отдельную тему).
Все ли грамотно? Что можно оптимизировать?

1 лайк
11

Я предположила.

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

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.fact div {
padding: 10px;
background: white;
}

.fact:nth-child(odd) div {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.fact div.title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.fact div.value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;
}

.albums img {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

#info-title {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.profile .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.profile .stroke {
background: #3498db;
}

.profile .feed {
background: #2ecc71;
}

.profile .startle {
background: #e74c3c;
}

#miska {
margin-right: 5px;
}

12

Предполагаю, что вы играли в “угадайку”, иначе как можете объяснить использование .photo для усиления свойств классов кнопок (startle, feed, stroke)? Можно оптимизировать, главное понять, что profile - это родитель, если для него были изначально прописаны правильные стили, то это для того, чтобы вложенные в него дочерние элементы могли их наследовать, а вы использовали его потому, что это работает:slight_smile:

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

body {
    width: 550px;
    height: 300px;
    font-size: 12px;
    font-family: Tahoma, Arial, sans-serif;
}

.profile {
    padding: 5px 10px;
}

.profile  img {
    display: block;
    padding: 10px;
    border: 2px solid #34495e;
    border-radius: 8px;
}

 .profile .photo {
    float: left;
    width: 152px;
}

.profile .info {
    float: left;
    width: 368px;
    margin-left: 10px;
}

#info-title,h2 {
    margin: 0 !important;
    padding: 10px !important;
    font-weight: normal;
    font-size: 12px;
    color: #ffffff;
    background: #34495e;
    border-radius: 4px;
}

.info div.fact {
    padding: 10px;
    background: white;
}

 div.fact:nth-child(odd) {
    background: #ecf0f1;
}

.fact::after {
    content: "";
    display: table;
    clear: both;
}

.fact div.title {
    float: left;
    width: 120px;
    text-align: right;
    color: #7f8c8d;
}

.fact div.value {
    margin-left: 140px;
    color: #34495e;
}

 .albums {
    margin-top: 5px;
}



.albums img:last-child {
    margin-right: 0;
}
 .albums img ,#miska   {
    float: left;
    margin-right: 5px ;
}
 .photo .button {
    display: block;
    height: 30px;
    margin: 5px 0;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    border-radius: 4px;
}

 .button.stroke {
    background: #3498db;
}

 .button.feed {
    background: #2ecc71;
}

 .button.startle {
    background: #e74c3c;
}

Оцените пожалуйста, есть какие либо недочеты и промахи в селекторах?

14

Добрый день!
Прошу посмотреть код ниже.
Визуально цель достигнута, но на шкале прогресса все еще “теплее”. Чего-то не хватает? Или, может что-то лишнее?
От !important избавиться не смогла. Каким еще образом можно еще более унифицировать правило с импортант, чтобы можно было его убрать?
Надеюсь на ответ.
Спасибо.

html,
body {
margin: 0px;
padding: 3px;
margin-left: 2px;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile span {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;

}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;

}

.info h2 {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

#info-title {
background-color:#34495e;
font-size:12px;
}

div.fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

div.fact:nth-child(even) {
padding: 10px;
background: white;
}

div.fact:nth-child(odd) {
padding: 10px;
background: #ecf0f1;

}

div.fact .value {
margin-left: 140px;
color: #34495e;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.profile div.fact + h2 {
margin-top:0px !important;
font-size:12px;
padding:10px !important;
}

.albums {
margin-top: 5px;

}

.albums img {
float: left;
margin-right: 5px;
display: inline-block;
}

.albums img:last-child {
margin-right: 0;
display: inline-block;
}

#miska {
margin-right: 5px;
}

.profile .photo .button {
display: block;
height: 20px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
line-height:20px;
}

.photo span.stroke {
background: #3498db;
}

.photo span.feed {
background: #2ecc71;
}

.photo span.startle {
background: #e74c3c;
}

15

Посмотрите на вкладку “Различия”.

16

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

screen
screen.png1521×790 132 KB

17

Вы не должны были дописывать свойства в правилах. Можно только менять селекторы.

18

Прошу подсказать как сдвигать картинки в альбомах? нужно тогда свойство position дописывать? или как
html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

#info-title, h2 {
margin: 0 ;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.fact div {
padding: 10px;
background: white;
}

.fact:nth-child(odd) div {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.info .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.info .fact .value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;

}

.albums img {
float: left;
margin-right: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.profile .startle {
background: #e74c3c;
}

19

http://forum.academy/t/eshhyo-raz-o-vzlomannom-kotoprofajle/6344

20

спасибо!!!