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

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

1 голос
/ 21 января 2009

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

           <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, но мне нужен точный контроль.

Ответы [ 4 ]

4 голосов
/ 21 января 2009

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

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

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

1 голос
/ 21 января 2009

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

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

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

0 голосов
/ 21 января 2009

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

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

0 голосов
/ 21 января 2009

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

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