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

Ineska · 13.Март.2017 21:17:40

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

Muryash · 14.Март.2017 08:53:38

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

Muryash · 14.Март.2017 12:10:16

Всё же пока остановлюсь на 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;
}

Alexey_Ivanov · 28.Июль.2017 09:19:50

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

cartoon · 02.Август.2017 13:51:54

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;
}
??

Ineska · 02.Август.2017 18:15:52

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

cartoon · 02.Август.2017 19:05:55

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

Ineska · 02.Август.2017 19:19:55

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

Tenzus · 04.Август.2017 12:55:05

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;
}

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

Oksana_Linn · 11.Август.2017 16:14:37

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

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;
}

w15 · 11.Август.2017 16:53:37

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

Poul · 05.Сентябрь.2017 21:28:43

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;
}

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

RitaStar · 08.Сентябрь.2017 14:55:33

Добрый день!
Прошу посмотреть код ниже.
Визуально цель достигнута, но на шкале прогресса все еще “теплее”. Чего-то не хватает? Или, может что-то лишнее?
От !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;
}

Ineska · 08.Сентябрь.2017 17:45:10

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

RitaStar · 08.Сентябрь.2017 20:50:22

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

Ineska · 09.Сентябрь.2017 07:24:51

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

Aliaksandr_Lisouski · 13.Сентябрь.2017 10:57:31

Прошу подсказать как сдвигать картинки в альбомах? нужно тогда свойство 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;
}

Alexey_Ivanov · 16.Сентябрь.2017 18:15:06

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

Aliaksandr_Lisouski · 18.Сентябрь.2017 13:27:00

спасибо!!!

lelya_dark · 04.Октябрь.2017 18:42:34

У меня вышел путем проб и ошибок вот такой:
html, body{
margin:0;
padding:0;
}
body{
font-family:Tahoma, Arial, sans-serif;
font-size:12px;
width:550px;
height:300px;
}
.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 #info-title,
.info h2{
margin:0!important;
padding:10px!important;
font-size:12px;
font-weight:normal;
background:#34495e;
color:#fff;
border-radius:4px;
}
.profile .info .fact {
padding:10px;
background:white;
}
.profile .info .fact:nth-child(odd){
background:#ecf0f1;
}
.fact:after {
content:"";
clear:both;
display:table;
}
.profile .fact .title {
float:left;
width:120px;
text-align:right;
color:#7f8c8d;
}
.profile .fact .value{
margin-left:140px;
color:#34495e;
}
.albums{
margin-top:5px;
}
.albums img, #miska{
float:left;
margin-right:5px;
}
.albums img:last-child{
margin-right:0;
}
.photo .button{
display:block;
height:30px;
margin:5px 0;
text-align:center;
line-height:30px;
color:#fff;
border-radius:4px;
}
.button.stroke{
background:#3498db;
}
.button.feed{
background:#2ecc71;
}
.button.startle{
background:#e74c3c;
}

вышло 100%