Минимизация использования явных атрибутов стиля заполнения

StackOverflow https://stackoverflow.com/questions/464339

  •  19-08-2019
  •  | 
  •  

Вопрос

Я обнаружил, что пишу много кода, который выглядит следующим образом: 

           <div id="leftCol">

                <div style="padding-top:10px">
                    <asp:Image ID="imgRazor1" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX" runat="server" />
                </div>

                   <div style="padding-top:10px">
                    <asp:Image ID="imgRazor2" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX_CART" runat="server" />
                </div>

                <div style="padding-top:20px; padding-bottom:15px">
                    <asp:Image ID="Image3" ImageUrl="~/images/announcements/announcement1.jpg" runat="server" />
                    <div style="font-size:x-small">(from example.com)</div>
                </div>
            </div>

Это значит, что я добавляю много явных отступов или полей.

Мне интересно, как лучше подходить к этому, не прибегая к таким именам классов: 

.mediumPadding {
    padding-top:10px;
}

.smallPadding {
    padding-top:5px;
}

.padding15 {
    padding: 15px
}

Когда я кодирую реальный CONTENT таким образом, в отличие от более общего LAYOUT, я нахожу, что конкретные размеры отступов являются более подходящими. Я обнаружу, что меняю с 8px на 11px, а затем обратно на 9px Должно быть, это дизайнер во мне, но мне не очень нравится привычка, которую я формирую.

Я не вижу себя способным пересмотреть глобальное правило, которое гласит, что «среднее заполнение» составляет 9px, меняя его на 11px и ожидая удовлетворительных результатов. Это может сделать некоторые страницы красивее и испортить другие.

Что делают другие люди, чтобы решить эту проблему? Я хочу использовать преимущества CSS, но мне нужен точный контроль.

Это было полезно?

Решение

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

Ваши классы должны отражать атрибут элемента (например, " caption "). В общем, классы не должны ссылаться на конкретную реализацию проекта. HTML - это «что», CSS - «как». Когда вы используете CSS-классы, которые представляют специфику дизайна, вы внедряете how в ваш HTML.

(Да, иногда эти правила нужно нарушать. Но это исключения.)

Другие советы

Каждый из этих div'ов будет иметь цель. Причина в том, что к ним относятся по-разному. Найдите это и дайте этим элементам имя, которое отражает содержание. 

<div id="leftCol">
  <div class="navigation"></div>
  <div class="calendar"></div>
</div>

Затем вы должны поместить ваш отступ в таблицу стилей. Если вы возвращаетесь к встроенному стилю для элементов дизайна, вы не продумываете семантику должным образом. Как только у вас появятся занятия, вы можете быстро и безболезненно редактировать таблицу стилей с помощью веб-разработчика и т. Д.

При необходимости вы можете иметь общее правило и переопределять его правилами id в определенных случаях: 

#leftCol > div { /* general rule */ }
#img1 { /* custom override 1 */ }
#img2 { /* custom override 2 */ }

Часто первый и последний элемент в контейнере требует особой обработки. Похоже, что это так в вашем примере.

Селекторы first-child и last-child не очень надежны во всех браузерах (в основном из-за IE6), поэтому вы можете либо добавить классы вручную для первого и последнего элемента, либо использовать немного javascript, чтобы помочь вам - Потомство прекрасно справляется с этим.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top