Верстка макета CSS стили на каждый чих, что я делаю не так?

Question

[Tryggvi]

Всем привет, я начинающий верстальщик, взял макет на заказ и на небольшой объем верстки уже 343 строки в CSS коде. Если я все же делаю не так, то как это исправить?

Comments

[Ankhena]

Смотрела с телефона, так что не много замечаний
1. Шрифт подключать с одним названием, изменять только жирность font-weight
2. padding auto не бывает
3. Нет смысла задавать нулевые отступы блокам, у которых этих отступов отродясь и не было. А также писать другие свойства, одинаковые по умолчанию во всех браузерах.
4. Абсолютное позиционирование использовать только в крайнем случае, когда задача по другому не решается. Чаще всего достаточно флекса и отступов.
5. Дополнение к 4, но всё таки отдельным пунктом. Если блочики все всё время нужно сдвигать, т. е. они не ложаться в какую-то логическую схему. Например, все по центру, все одинаковой ширины или на одинаковом расстоянии, то либо вы не поняли задумки дизайнера, либо дизайнер был ленив и кривоват либо комбо этих "либо". Короче, повод остановится и проверить, а всё ли идет по плану и не надо ли этот план изменить.
6. Повторяющиеся свойства.
7. Нет смысла писать свойства с префиксами при наличии автопрефиксера.

Answer 1

[Дима Паутов]

А что вас не устраивает? Их может быть и тысячи и всё нормально

Comments

[Tryggvi]

cssdeck.com/labs ну, там много position: relative; и сдвигов с top, left, bottom, right. И это очень мешает адаптивной верстки. Я особо не видел, чтобы так верстали, поэтому и сомневаюсь в правильности верстки.

[ned4ded]

Tryggvi, если у вас действительно каждый блок расположен с помощью относительного / абсолютного позиционирования, то это не лучшая практика. Продемонстрируйте код своей верстки, тогда вам смогут подсказать на какие моменты стоит обратить внимание.

[Tryggvi]

/* основной фон страницы */
body {
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
  }
 
/* ссылки во всех состояниях */
  a, a:hover, a:focus{
    text-decoration: none;
    color: black;
    outline: 0;
  }

  :visited {
    color: #393939;
    /* Цвет посещенных ссылок */
  }
/* фон шапки сайта */
  .Rectangle-2 {
    position: absolute;
    height: 87px;
    background-color: #ffffff;
    border: solid 1px #cccccc;
    border-right: none;
    border-top: none;
    border-left: none;
    margin: 0;
    padding: 0;
  } 

/* ссылки смены языка */
  .kz-Ru {
    position: relative;
    width: 32px;
    height: 9px;
    font-family: "RobotoRegular";
    font-size: 13.8px;
    padding: 21px 21px 0px 1107px;
    top: -15px;
    /* верхний, правый, нижний, левый */
    color: #393939;
  }

  .kz-Ru .text-style-1 {
    margin-left: 5px; 
    color: #b5b5b5;
  }

/* размер лого сайта для первой картинки*/

.Layer-0 {
    width: 34px;
    height: 34px;
  }
/* размер лого сайта для второй картинки */
.Layer-1 { 
    width: 109px;
    height: 21px;  
    margin: 9px 0px 4px 12px  
  }

/* отсутпы для лого */ 
  .main-mdpi {
    display: inline;  
    padding: 32px 1104px 20px 19px;
  }

  @-moz-document url-prefix() {
    .Vector-Smart-Object {
      position: relative;
      display: inline;  
      margin: 9px 0px 4px 12px ;
      top: -37px;
      right: -60px;;
    }
  }

  .Vector-Smart-Object {
    display: inline;  
    margin: 41px 982px 25px 0px; 
  }

/* навигация по сайту */
.navigation {
    position: absolute;
    font-family: "RobotoLight";
    font-size: 18.2px;
    font-weight: 300;
    text-align: right;
    color: #393939;
    padding-top: 48px;
    top: -20px ;
    padding-left: 346px;
    padding-right: 321px;
  }

.navigation>a {
    margin: 20px;
}

/* кнопка */
.Rounded-Rectangle-2 {
    position: relative;
    width: 87px;
    height: 21px;
    text-align: center;
    top: -22px;
    left: 1057px;
   
  }

@-moz-document url-prefix() {
    .Rounded-Rectangle-2 {
        position: relative;
        width: 87px;
        height: 21px;
        text-align: center;
        top: -81px;
        left: 1057px; 
    }
}

@-moz-document url-prefix() {
    .layer {
        height: 20px;
        width: 87px;
        text-align: center;
        border: none;
        font-family: "RobotoRegular";
        font-size: 18.2px;
        border-radius: 10px;
        color: #ffffff;
        background-color: #99ca3e;
        
      }
}

.layer {
    line-height: 18px;
    width: 87px;
    text-align: center;
    border: none;
    font-family: "RobotoRegular";
    font-size: 18.2px;
    border-radius: 10px;
    color: #ffffff;
    background-color: #99ca3e;
    
  }

/* контент рядом с телефоном */
.Rectangle {
    position: absolute;
    width: 100%;
    top: 150px;
    height: 394px;
    background-color: #eeeff0;

  }

.Google-Pixel-2 {
    position: relative;
    top: -70px;
    margin: 28px 0px 0px 35px;   
     
  }

  .tag-line { 
    position: relative;
    top: -685px;
    left: 300px;
    width: 700px;
    
    height: 86px;
    font-family: "RobotoLight";
    font-size: 40px;
    font-weight: 300;
    color: #393939;
    margin: 199px 161px 267px 46px;
  }


  .about-the-app {
     position: relative;
     margin:0 auto;
     padding: 0 auto;
     top: -900px;
     right: -115px;
     width: 800px;
     height: 139px;
     color: #393939;
     font-family: "RobotoLight";
     font-size: 20px;
     font-weight: normal;
   
   }
   
   .download {   
    margin:0 auto;
    padding: 0 auto;
    position: relative;
    top: -900px;
    left: -145px;
    width: 280px;
    height: 19px;
    color: #393939;
    font-family: "RobotoLight";
    font-size: 20px;
    font-weight: 300;
  }  
  
  .Google-play-logo {
    position: relative;
    float: right;
    top: -40px;
    left: 165px;
  }

  .diary {
    position: relative;
    width: 650px;
    height: 24px;
    top: -720px;
    left: 350px;
    font-family: "RobotoLight";
    font-size: 25px;
    font-weight: 300;
    text-align: left;
    color: #393939;
  }

  .about-sugar {
    display: block;
    position: relative;
    top: -700px;
    left: 330px;
    width: 642px;
    height: 61px;
    font-family: RobotoLight;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    color: #393939;
  }

  /* колонка с особенностями программы */
  .layer-2  {
    position: relative;
    
    width:100%;
    height: 331px;
    background: url(../img/group-3.png) center no-repeat;
    top: -635px;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
    
}

/* рамки в колонке */
.Rounded-Rectangle-1-copy-4 {
    position: relative;
    left: 300px;
    bottom: -45px;
    width: 176px;
    height: 160px;
}

.Rounded-Rectangle-1-copy-3 {
    position: relative;
    width: 176px;
    height: 160px;
    left: 350px;
    bottom: -45px;
  }

  .Rounded-Rectangle-1-copy-2 {
    position: relative;
    width: 176px;
    height: 160px;
    left: 400px;
    bottom: -45px;
  }

  /* иконки в колонке */
    .Rectangle-3-copy-2 {
        position: relative;
        width: 48px;
        height: 53px;
        bottom: -45px;
        left: 185px;
    }


    .phone-call {
        position: relative;
        width: 54px;
        height: 55px;
        left: 235px;
        bottom: -45px;
    }

    .alarm {
        position: relative;
        width: 61px;
        height: 56px;
        left: 283px;
        bottom: -45px;
    }
/* текст в колонки */
    .text-diary {
        position: relative;
        top: -2px;
        left: 345px;
        font-family: "RobotoLight";
        font-size: 25px;
        font-weight: 300;
        text-align: left;
        color: #ffffff;
    }

    .text-phone {
        position: relative;
        top: -53px;
        left: 590px;
        font-family: "RobotoLight";
        font-size: 23px;
        font-weight: 300;
        text-align: left;
        color: #ffffff;
    }

    .text-alarm {
        position: relative;
        top: -102px;
        left: 880px;
        font-family: "RobotoLight";
        font-size: 25px;
        font-weight: 300;
        text-align: left;
        color: #ffffff;
    }

[Tryggvi]

ned4ded,

<!DOCTYPE html>
<html lang="ru">
<head>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/style2.css">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DiaGram</title>
</head>
<body>
    <header class="Rectangle-2">
        <div class="kz-Ru">
            <a href="#">kz</a><a href="#" class="text-style-1">Ru</a> 
        </div>
        
        <div class="main-mdpi">
            <img src="img/Layer-0.png" alt="" class="Layer-0"> 
            <div class="Vector-Smart-Object">
                <img src="img/Layer-1.png" alt="" class="Layer-1">
            </div> 
        

            <div class="navigation">
               <a href="#">О проекте</a> <a href="#">Преимущества</a>  <a href="#">Отзывы</a>  <a href="#">СМИ о нас</a>         
            </div>
            
            <div class="Rounded-Rectangle-2">
                <button class="layer">Войти</button>
            </div> 
        </div>
    </header>
    <section class="Rectangle">
        <div class="Google-Pixel-2">
            <img src="img/pixel-2.png" alt="">
        </div>
        
        <h1 class="tag-line">
            Мобильный дневник самоконтроля
            Удобно. Эффективно. Доступно.
        </h1>

        <p class="about-the-app">
            Приложение DiaGram - это помощник для 
            наблюдения за вашим самочувствием.
            Здесь вы можете отслеживать уровень сахара, 
            подсчет калорий или хлебных единиц,
            наблюдать за своей активностью и отмечать 
            прием лекарств. 
        </p>
            
        <p class="download">
            Скачать можно уже сайчас в <img class="Google-play-logo" src="img/google-play-logo.png" alt="">
        </p> 
        <h1 class="diary">
            Мобильный дневник диабетического самоконтроля
        </h1>
        <p class="about-sugar">
            Измерения сахара, журнал приема лекарств, записи о питании и физической 
            активности, артериальное давление и множество другой информации –
            записывайте и не теряйте, а также консультируйтесь с Вашим врачом
        </p>
        <div class="layer-2">
           <img class="Rounded-Rectangle-1-copy-4" src="img/rounded-rectangle-1-copy-2.png" alt=""> <img class="Rectangle-3-copy-2" src="img/group-4.png" alt="">
           <img class="Rounded-Rectangle-1-copy-3" src="img/rounded-rectangle-1-copy-3.png" alt=""> <img class="phone-call" src="img/phone-call.png" alt="">
           <img class="Rounded-Rectangle-1-copy-2" src="img/rounded-rectangle-1-copy-4.png" alt=""> <img class="alarm" src="img/alarm.png" alt="">
           <p class="text-diary">дневник</p>
           <p class="text-phone">Звонок к врачу</p>
           <p class="text-alarm">Напоминание</p>
        </div>

        <div>
            
        </div>
    </section>
</body>
</html>

Answer 2

[Ольга Ветер]

научись выделять однотипные элементы, например текст в иконках трех нижних - с одинаковыми стилями, эти стили должен нести один класс, а не три разных.

Эти иконки у тебя вообще как-то странно сделаны. Смотри, есть блок, пусть div, в нем есть иконка, ну можно img, можно вообще просто background, потому что особого смысла она не несет, и текст p. У блока скругляешь углы, задаешь рамку, внутренние отступы, если делать на флексбоксах остальное выравнивание этого куска - пара строк для внутри, и пара строк для выравнивания всех трех иконок относительно друг друга.

не нужно позиционировать каждый элемент через relative или того хуже absolute. Очень советую сразу осваивать flexbox, если слишком сложно, просто научись логично выстраивать структуру блоков, чтобы было удобно выравнивать контент. Чтобы логически одинаковые элементы оформлялись одним классом и имели идентичную структуру. Желательно делай сразу все, что можно, в относительных величинах - % и тп. Представь, тебя сейчас это попросят переверстать на экран меньшего размера. Ты же чокнешься это все переписывать.... А не адаптивная верстка сейчас практически не востребована.