Поместите все стили в CSS файлы против смешанной структуры - PullRequest
Новая
       12

Поместите все стили в CSS файлы против смешанной структуры

4 голосов
/ 04 января 2012

Мне сказали, что хорошим примером является помещение всех стилей в CSS-файлы, потому что бла-бла (вы можете искать причину в Google, так как это очень популярная идея). Тем не менее, я человек всегда спрашиваю, почему, когда люди пытаются продать. Основано на моем собственном опыте с каким-то проектом. Я думаю, что сложить все стили в файлах сложнее, поскольку есть некоторые наследуемые или специфичные для страницы стили.

Например, у меня есть элемент управления для отображения условий: 

.TermsAndConditions
{
    background-clip: padding-box;
    border: 1px solid #CFC2A7;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;

    position:absolute;
    top: 0px;
    left:0px;
}

Когда мне нужно использовать его на двух моих страницах, я должен создать для него два специальных класса: 

.HomePageTermsAndConditions
{
    position: static;
    bottom: 20px;
    right:30px;
}


.ImagePreviewPageTermsAndConditions
{
    position:absolute;
    top: 50px;
    left:60px;
}


Home page:
<div class="TermsAndConditions HomePageTermsAndConditions">
</div>

Preview page:
<div class="TermsAndConditions ImagePreviewPageTermsAndConditions">
</div>

Абсолютно нет встроенных стилей, но есть некоторые проблемы:

  1. Информация о местоположении вообще не передается, поэтому прирост производительности очень ограничен в зависимости от скорости сети в настоящее время. (например, очистить: слева)

  2. Некоторые стили даже не наследуются, поэтому мы должны создавать классы CSS для каждого уровня, что не экономит усилия.

  3. Трудно поддерживать, поскольку классы css в файлах могут наследоваться или переопределяться на другой странице, при редактировании класса трудно понять, какой эффект он может вызвать, поэтому для тестирования / отладки / исправления требуется время туда и обратно.

  4. Повреждение производительности, некоторые классы CSS останутся там, когда страница, использующая их, будет удалена. Требуется усилие, чтобы очистить их.

Итак, я предложил переместить определенные стили страницы / тега (например, информацию о позиции) как показано ниже: 

.TermsAndConditions
{
    background-clip: padding-box;
    border: 1px solid #CFC2A7;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
}

<div class="TermsAndConditions" style="position:absolute; bottom: 20px; right:30px;">
</div>


<div class="TermsAndConditions" style="position: static; top: 50px; left:60px;">
</div>

Преимущества, которые мы можем получить:

  1. Нет конкретной страницы информации в классах. Не влияет на производительность, так как на странице только несколько стилей

  2. Проще поддерживать, так как встроенный стиль имеет более высокий приоритет, редактирование встроенного стиля немедленно окажет влияние на пользовательский интерфейс. Также вам не нужно беспокоиться о взломе других страниц.

  3. Когда нам нужно удалить страницу, нам обычно не нужно чистить CSS. Поскольку css для конкретной страницы есть на странице, она идет вместе со страницей. Вещи в файлах css более распространены.

  4. Более объектно-ориентированный. Так как классы CSS в файлах не имеют специфической для страницы информации, они больше похожи на элемент управления. Легко подключить к другим страницам.

Например:

Когда мне это нужно на новой странице, я просто копирую html и изменяю встроенный стиль: 

<div class="TermsAndConditions" style="position: absolute; top: 50px; left:60px;">
</div>

Это моя идея против "помещения всех стилей в CSS-файлы". Я надеюсь увидеть ваши идеи по этому поводу, будь то хорошие или плохие стороны.

Спасибо

Ответы [ 2 ]

0 голосов
/ 04 января 2012

Преимущество наличия ваших стилей вне вашего HTML заключается в следующем.

Допустим, у меня есть навигационная панель на каждой странице, например: 

<ul class="main-navigation">
   <li>my link</li>
   <li>my link</li>
   <li>my link</li>
   <li>my link</li>
</ul>

Тогда мои стили будут выглядеть примерно так: 

.main-navigation ul li {
color:#000;
}

Теперь допустим, у меня та же панель навигации, но на этот раз со встроенными стилями. 

<ul>
   <li style="color: #000;"></li>
   <li style="color: #000;"></li>
   <li style="color: #000;"></li>
   <li style="color: #000;"></li>
</ul>

Или, допустим, мои стили были встроены в мой HTML следующим образом. 

<style type="text/css">
   .main-navigation ul li {
    color:#000;
    }
</style>

В зависимости от того, как настроено ваше управление файлами. Скорее всего, вы не захотите просматривать каждый HTML-файл, чтобы изменить что-то столь же простое, как ваш цвет навигации. Когда вы можете просто зайти в таблицу стилей и изменить одну строку кода.

Надеюсь, это имеет смысл. Но я думаю, что в целом я бы сказал, что в некоторых случаях это более практично. Однако я лично считаю, что разделение HTML, CSS, Javascript и PHP значительно упрощает устранение неполадок.

0 голосов
/ 04 января 2012

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

...