Архитектура CSS: рефакторинг вашего CSS

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

Итак, хотя описанные мною подходы сами по себе великолепны, нам действительно нужен способ объединения всех суперспособностей, способных бороться со злом сумасшедшего кода — своего рода « Лига справедливости » с масштабируемыми и модульными техниками. Кроме того, точно так же, как Рим не был построен за один день, глупо пытаться исправить одним махом тысячи строк кода, в которых нет ни рифмы, ни причины. Таким образом, это хорошая идея для передачи кода в сфокусированных волнах с помощью поэтапного подхода.

Предоставление CSS рефакторинга хорошего имени

В прошлом году у меня был проект для клиента, где я был оставлен именно для этого. Изучив DRY CSS, OOCSS, SMACSS и CSSG, я постарался использовать их в своей основной практике. В момент осознания я понял, что все эти подходы сводятся к известной поговорке: «Измерить дважды, отрежьте один раз». Конечно! Все они поощряют просмотр шаблонов, создание переносимых стилей и модулей, которые можно использовать повторно, а не добавление лишних и избыточных селекторов или стилей.

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

После того, как я создал процесс, мне пришлось выяснить, как его назвать. Взяв за основу «измерить дважды, обрежьте один раз», я добавил в него CSS, и вот что я получил:

измерьте дважды, отрежьте один раз css → mtco css → meta coa css → MetaCoax!

Итак, в этой статье я поделюсь с вами своим процессом рефакторинга CSS MetaCoax, предназначенным для «дедалификации» тысяч строк избыточного CSS, улучшая читабельность, простоту и расширяемость CSS, сохраняя при этом видимый дизайн и функциональность сайт такой же. ( Посмотрите слайды из моей недавней презентации по деблокированию CSS.)

Чтобы подготовиться к рефакторингу CSS, вот несколько советов. Во-первых, будьте знакомы со спецификой и каскадом — это будет иметь огромное значение. Я надеюсь, что в первых двух статьях этой серии ( часть 1 , часть 2 ) я рассказывал, что чрезмерное использование селекторов и правил ограничивает их повторное использование. Особенно при использовании потомственных селекторов специфичность может легко и быстро выйти из-под контроля, и именно этого мы стремимся избежать. Во-вторых, помните правила наследования: некоторые свойства наследуются дочерними элементами; таким образом, всегда следует помнить о том, как эти свойства касаются DOM.

Процесс MetaCoax

Процесс MetaCoax представляет собой четырехэтапный подход. Каждый этап основан на предыдущем, и все они включают в себя методы, которые уменьшают объем кода, увеличивают масштабируемость и удобство обслуживания и, в качестве дополнительного бонуса, закладывают основы для будущего сайта. Мы рассмотрим подробную разбивку каждой фазы, а также методы и приемы, которые каждый из них охватывает. В этой статье я расскажу о фазах 1 и 2. Подробности о фазах 3 и 4 появятся в заключительной статье серии.

Примечание. Отличным инструментом для использования во время процесса рефакторинга MetaCoax является CSS Lint Николь Салливан, который определяет дополнительные места в CSS для очистки и дает идеи о том, как это сделать.

Этап 1. Сокращение селекторов и наборов правил рычагов и слоев

Первый этап ориентирован на минимальный объем работы по улучшению CSS сайта. Эти изменения включают изменение CSS, но не затрагивают текущий HTML-код для страниц сайта. Цель состоит в том, чтобы сделать таблицу стилей немного более легкой, а также проще в обслуживании и обновлении с небольшим количеством времени и усилий. Этот метод предусматривает оптимизацию селекторов при одновременном снижении избыточности за счет более разумного повторного использования наборов правил. Даже если вы примените только методы этого этапа к своему CSS, вы увидите улучшение в удобстве обслуживания.

Вот что мы собираемся сделать:

• Укоротить цепи селекторов
  • Kill отборочные
  • Отбрось потомков
  • Сделайте цепь селектора три или меньше
• Плечо и слой объявлений
  • Используйте каскад, опираясь на наследование
  • Обзор, пересмотреть и уменьшить! Важные свойства
  • СУХОЙ («не повторяйся») свои наборы правил

Укоротить селекторные цепи

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

У вас есть несколько способов сократить цепочку селекторов, включив практики из всех масштабируемых архитектур, которые я описал, и далее применяя принцип «сокращать, повторно использовать, перерабатывать». Все практики гарантированно делают код CSS более щадящим. И разве это не цель обновления наших стилей?

 /* Table of Contents

- Base
- Layout
- Module
- State
- Theme

*/
…

(later in the document…)

/* =Layout */ (etc.)

 body.donations.events div#footer-columns div#col1 div.staff span.slug {
display: block;
margin: 3px 0 0 0;
}

 body.video div#lowercontent div.children.videoitem.hover a.title { background: #bc5b29; 
color: #fff !important;
text-decoration: none; 
}

 .donations-slug {
display: block;
margin: 3px 0 0 0;
}

 #go, #pmgo{
    width: 29px;
    height: 29px;
    margin: 4px 0 0 4px;
    padding: 0;
    border: 0;
    font-size: 0;
    display: block;
    line-height: 0;
    text-indent: -9999px !important;
    background: transparent url("/images/go.jpg") 0 0 no-repeat;
    cursor: pointer; /* hand-shaped cursor */
    x-cursor: hand; /* for IE 5.x */
}

#pmgo{
    margin: 2px 0 0 3px;
    background: transparent url("/images/go.jpg") no-repeat center top;
}

 .button-search{
    width: 29px;
    height: 29px;
    margin: 4px 0 0 4px;
    padding: 0;
    border: 0;
    font-size: 0;
    display: block;
    line-height: 0;
    text-indent: -9999px !important;
    background: transparent url("/images/go.jpg") 0 0 no-repeat;
    cursor: pointer; /* hand-shaped cursor */
    x-cursor: hand; /* for IE 5.x */
}

.button-search--pm{
margin: 2px 0 0 3px;
background: transparent url("/images/go.jpg") no-repeat center top;
}

 .margin-top {margin-top: 5px;}
.margin-bottom {margin-bottom: .5em;}

 .h-slug {font-size: .8em;}

.h-title {font-size: 1.5em;}

.h-author {font-size: 1em;}

 <li>

<a href="/learning/hillman" title="">

<img src="/images/brenda-hillman.jpg" alt="Air in the Epic" />

</a>

<span>Brenda Hillman Essays</span>

<span><a href="/learning/hillman" title="Air in the Epic" class="title">Air in the Epic</a></span>

<span>Brenda Hillman</span>

</li>

 <li>

<a href="/learning/hillman" title="">

<img src="/images/brenda-hillman.jpg" alt="Air in the Epic" />
</a>

<p>Brenda Hillman Essays </p>

<h3><a href="/learning/hillman" title="Air in the Epic" class="title">Air in the Epic</a></h3>

<p>Brenda Hillman</p>

</li>

 <span class="text-indent: 1em">Skittles are tasty</span>

 .indent {text-indent: 1em:}