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

Давайте перейдем к делу: в этом уроке я собрал несколько Трюки которые вы можете использовать для повышения производительности при написании кода CSS. Вы можете реализовать их в любое время в своих старых или новых проектах.

Мы рассмотрим, в частности:

1. Коллекция недвижимости

Если вы обнаружите, что записывали одни и те же свойства снова и снова, убедитесь, что вы не можете усечь их, удалив ненужные классы и идентификаторы. Затем добавьте все общие свойства в одну скобку.

Если вы можете связать свои разделы, вы сможете создать файл, который будет более эффективным в работе и будет работать намного быстрее.

2. Используйте пароль для констант

К сожалению, ограничением CSS является то, что вы не можете определять константы, как в PHP. Константы - это термины, которые вы можете определить один раз, которые используются остальной частью скрипта, независимо от объема кода и включений.

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

Тем не менее, это было бы действительно полезно, особенно в том случае, если объединение ваших свойств не сделает за вас всю работу.

Что вы можете сделать, так это создать идентификатор, включающий все нужные вам стили. Когда вам действительно нужно его использовать, просто добавьте селекторы, которые вам нужны для объявления. Это заставит вас писать код CSS намного быстрее.

3. Комментарий вашей постоянной

Конечно, CSS не поддерживает константы, но это не значит, что вы все еще не можете написать ссылку на то, что в противном случае было бы константами. Почему бы не перечислить общие стили в многострочном комментарии?

Вам решать, как вы будете печатать эти комментарии, но вы можете создать своего рода таблицу материалов, подобную этой:

/ * CSS 'Константы' * * Фон: #ccc9c9 * Глубокие серая, текст: * #3a3838 фон счастливой рука #e7e7e7 * * /

Это особенно полезно для меня, потому что мне не всегда легко быстро узнать, каковы функциональные детали блока кода (константы). Наличие рядом обратного вызова помогает ускорить процесс кодирования, поскольку вы точно знаете, где искать, и вам не придется искать в гору CSS, чтобы найти точку, в которой вы ссылались на определенный стиль.

4. Сгруппированные селекторы

Зачем останавливаться на достигнутом? Пока вы занимаетесь этим, почему бы не сгруппировать множество селекторов, которые можно собрать вместе? Это избавит вас от необходимости набирать один и тот же стиль несколько раз:

h1, h2, h3, h4 р {утеплитель: 1 эм; семейство шрифтов: "Times New Roman" времена, засечки; } Уль .navigation, .navigation Li {обивка-топ: 0,5 ет; }

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

5. Используйте препроцессор

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

Наиболее распространенными препроцессорами CSS в WordPress являются SASS и LESS, а также Вы можете научиться использовать оба.

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

6. Псевдо-классы

Как объясняет специалист по CSS Эрик Мейер,  список стилей ссылок в определенном порядке важный. В противном случае вы можете получить стилизованные ссылки, которые не будут работать так, как вы надеялись.

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

а: ссылка {заявление}: с посетило {утверждение} A: парить {утверждение}: с активным {} утверждение

сначала устанавливается стиль непосещенных ссылок, затем посещаемых при наведении курсора мыши и активных ссылках. На самом деле порядок не имеет особого значения, цель - как можно проще заставить вас запомнить эту комбинацию. Этот порядок называется псевдоклассами «LoVe / HAte» из-за букв, используемых в псевдоклассах.

К сожалению, это не включает псевдокласс «focus», хотя его можно рассматривать как «активный» псевдокласс. Существует также мнемоническая фраза, которая включает этот псевдокласс: « LoVe Hurts Fade Прочь ":

а: ссылка {заявление}: с посетил {утверждение} A: парить {утверждение} а: фокус {заявление}: с активным {} утверждение

7. Использовать сокращение CSS

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

С помощью ярлыка CSS вы можете объединить несколько строк в одну без потери функциональности. Например, ниже вы увидите 3 линии, относящиеся к границе элемента:

#maincontent {граница-ширина: 1px; стиль границы: твердый; граница цвета: черный; }

Эта строка может быть намного проще:

#maincontent {граница: сплошной черный 1px; }

8. Использование ярлыков для изображений

Ярлыки CSS не всегда могут быть лучшим решением для вас, но вы можете принять это правило при работе с цветами.

Вместо использования шестизначного шестнадцатеричного кода вы можете использовать только 6 цифры.

#ffffff = #fff #1144bb #14b #ffcc44 = = #fc4

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

К этому нужно время, чтобы привыкнуть, но жертва того стоит. Если другие формы ярлыков не распространены, вам не о чем беспокоиться, потому что цветные ярлыки почти всем знакомы.

9. Ссылки не нуждаются в цитировании и пространстве.

Когда вы добавляете URI в таблицу стилей, правильный и правильный формат включает одинарные и двойные пробелы и кавычки, как в этом примере:

тело {
Фоновое изображение: URL («Http://www.example.com/deepgray-pattern.png»);
}

После "url (" есть пробел, кавычки и закрывающий пробел, которые на самом деле необязательны.

Чтобы сэкономить вам немного больше времени и места, эту же строку можно записать так:

тело {
Фоновое изображение: URL (Http://www.example.com/deepgray-pattern.png);
}

Вы заметите, что пробел и кавычки на самом деле не нужны.

10. Проанализируйте CSS

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

К счастью, есть бесплатные инструменты, такие как CSS анализ, CSS Dig et CSS Lint. Все, что вам нужно сделать, это ввести свой код, выбрать несколько параметров и нажать кнопку, чтобы мгновенно получить отчет для вашего кода CSS.

CSS Lint еще более серьезен и может оскорбить вашу чувствительность во имя прогресса, помогая вам улучшить свои навыки программирования.

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

Это все для этих Трюки который вы можете использовать в своих различных проектах CSS. Не стесняйтесь предложить нам свои Трюки.