Скажите проводя code review на что необходимо смотреть? На сколько мой код CSS/Less адекватен?

Question

[krll-k]

Нижеприведенный код, - это модальное окно без использования Javascript, - это мой прототип модального окна по дизайну товарища:

<a href="#modal">Спросить!</a>


  
      Данный сайт предназначен для просмотра лицам, достигшим совершинолетия
      Вам уже есть 18 лет?
      <a href="#step">Да</a>
      <a href="#">Нет</a>
  



  
      Подтвержение что Вам действительно есть
      +18
      <a href="#">Да</a>
      <a href="#">Нет</a>

На сколько мой код адекватен?

body{
  width:1200px;
  margin:5% auto;
}

#modal > .modal{
  width:470px-12px*2+2;
  height:200px-12px*2+2;
}

#step > .modal{
  width: 630px !important;
  height: 550px !important;
  top: 15%;
}

#step{
  /* opacity: 0.7; */
  /* display: block; */
}


/*Модалька начало*/

.modal-contain {
  display: none;
}

.modal-contain:target {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.75);
}

.modal-close {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  cursor: default;
}

.modal {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0 auto;
  border:12px solid #333;
  background: #fff;
}

/*Модалька конец*/

/*Типографика начало*/

h5{
  color:#313131;
  font-size: 16px;
  margin-top:15px !important;
}
h3{
  color:#FFAB35;
  font-size:24px;
  margin-top:15px !important;
}
h2{
  font-weight: 700;
}
h1{
  color: #FF9000;
  font-size: 64px;
  font-weight: 700;
}
h2,h1{
    margin: 10px;
}
h5,h3,h2,h1,a{
  font-family: ‘Metrophobic’, Arial, serif;
  font-weight: 400; 
  text-align: center;
}

/*Типографика конец*/

/*Кнопки начало*/

.btn{
  text-align:center;
  width:90px;
  height:35px;
  color:white;
  border:none;
  border-radius:4px;
  position: absolute;
  font-size:17px;
}
.yes{
  background:#FF9000;
  left:125px;
}
.no{
  background:#00AEFE;
  right:125px;
}

/*Кнопки конец*/

Есть какие нибудь лучшие практики? В каком направлении двигаться, если хочу попасть в большую компанию?

Answer 1

[andreyqin]

Вообще не вчитываясь в код могу сказать, что:

- использование id - плохо
- использование !important - плохо
- у transform есть префиксы для разных браузеров
- не увидел в коде Less, кроме расчета размеров в начале
- не понятно, зачем в заголовках вы используете strong, а в ссылках - button
- плохое форматирование кода

Comments

[krll-k]

@andreyqin и @lnked, над чем стоит поработать в первую очередь? У моего кода только минусы? А что хорошего есть в моем коде? Просто если «минусов» – 6, сколько тогда «плюсов»? – прошу дать краткий и четкий комментарий,- на столько быстрый- на сколько позволяет свободное время

C id понятно, но в моем случаи это надо, модальное окно работает на html5/css3

– взято из статьи 5 things you won’t believe are only built with CSS

1) Плохо/хорошо использовать препроцессор Less? Что посоветуете еще?
2) Почему important плохо? Где об этом почитать?
4) В случае если использую чужой код, в нужно указывать автора?
5) Как правильно хранить css код?
6) Есть один style.css – как правильно организовать import'ы?
7) Можешь рассказать про лучшие практики? Где об этом почитать?

[andreyqin]

@krll-k каких-то плюсов я у вашего кода не увидел, это обычный код, который выполняет свою задачу, но может быть значительно улучшен. И минусов не 6, их можно больше найти, но мне лень вникать подробно. По поводу связи id с html5/css3 вообще не понял.

1) Хорошо
2) Использование important означает, что где-то в коде есть проблемы со специфичностью. Или из-за того, что лень искать, почему стиль не задается.
4) Как хотите
5) Не понял вопроса
6) Почитайте про сборщики проектов. Можно вести разработку, разделяя код на несколько файлов, а в продакшен выкладывать один.
7) Гугл расскажет