Как вы оцените качество данного css кода?

Question

[Rodion Svetlitskiy]

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,cyrillic-ext);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic-ext);
@import url(http://fonts.googleapis.com/css?family=Cookie);

.wrapper_71{
    width: 71.74231332357247%;
    position: relative;
    margin: 0 auto;
}

.wrapperMenu {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: fixed;
    z-index: 999999;
    top: 0;

    -ms-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1.0);
    -moz-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1.0);
    -webkit-transition: all 0.6s cubic-bezier(0.42, 0, 0.58, 1.0);
    transition: all 0.6s cubic-bezier(0.42, 0, 0.58, 1.0);
}

.bgMenu {
    height: 170px;
    width: 110%;
    left: -3%;
    top: -40px;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    z-index: 9999;

    -moz-transform: rotate(-1.6deg);
    -o-transform: rotate(-1.6deg);
    -ms-transform: rotate(-1.6deg);
    -webkit-transform: rotate(-1.6deg);
    transform: rotate(-1.6deg);

    -moz-box-shadow: 0 0 3px 3px rgba(0, 0 , 0, 0.2);
    -o-box-shadow: 0 0 3px 3px rgba(0, 0 , 0, 0.2);
    -webkit-box-shadow: 0 0 3px 3px rgba(0, 0 , 0, 0.2);
    box-shadow: 0 0 3px 3px rgba(0, 0 , 0, 0.2);

    -ms-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1.0);
    -moz-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1.0);
    -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1.0);
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1.0);
}

Answer 1

[andreyqin]

1) htmlbook.ru/css/font
2) width: 71.74231332357247%;
3) Сокращайте:

padding: 20px 25px 20px 25px; -> padding: 20px 25px;
padding: 40px 5% 40px 5%; -> padding: 40px 5%;
padding: 20px 0 30px 0; -> padding: 20px 0 30px;

и т.д.

4) Объединение стилей, там где можно. Например:

.itemWork{
    width: 100%;
    height: 100%;
}
.owl-item, .owl-stage-outer, .owl-stage{
    height: 100%;
    width: 100%;
}

А если это блочные элементы, то ширину и вовсе задавать не нужно.

Еще:

nav a:hover {
    color: #ffd800;
}
nav a.active {
    color: #ffd800;
}
.contactPhone i span {
    color: #ffd800;
}

5) o-border-radius - нет такого свойства (htmlbook.ru/css/border-radius)
6) Не обязательно задавать цвет рамки, если он такой же, как у текста:

order: 2px solid #fff;
color: #fff;

7) Опять же, ширина блочных элементов равна 100%, не обязательно это указывать:

display: block;
width: 100%;

А еще не обязательно указывать display: block у тех элементов, которые и так являются блочными. Я могу ошибаться, но судя по селекторам, у вас такие присутствуют.

8) Часто встречается color: #fff;, возможно, стоит задать это свойство какому-то корневому элементу.

9) transition выносите в отдельный класс, часто повторяется. И вообще, на будущее, часто повторяющиеся свойства или группу свойств выносите в отдельный класс, облегчите себе поддержку.

10) font-weight: 500; - такие значения не работают в браузерах. Нормально работают только 400 и 700.

11) z-index: 999993; - Вам удобно ориентироваться в таких значениях? Обычно большой z-index ставят во всяких js-плагинах.

Comments

[Rodion Svetlitskiy]

Спасибо!

[Rodion Svetlitskiy]

А можно ссылку на ваш код, для примера? Может что новое для себя узнаю.