Лучшие практики CSS: девять признаков плохого CSS

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

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

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

Сложность CSS

CSS сложен? Нет! Определенно нет, в нем есть несколько очень простых структурных правил. У вас есть селекторы (класс, идентификатор, элемент), у вас есть свойства и у вас есть область видимости. Это намного меньше, чем такой язык, как C, Java или PHP. Разработчик может понять всю идею за несколько минут чтения и начала работы с стилем. Конечно, чтобы узнать разницу между полями и отступами, вы можете взглянуть на w3schools, но когда использовать это, потребуется некоторый опыт. Но это не ракетостроение.

Теперь, что немного усложняет ситуацию, так это то, как соревнуются разные селекторы, которые могут перезаписать следующее, и как одно свойство влияет на другое (например, display: block vs display: inline). Затем у нас есть более мелкие детали, такие как схлопывание полей, наложение z-индекса, свойства производительности GPU и CPU, блочная модель и свойства типографики.

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

Если мы посмотрим на два абзаца выше, мы увидим два основных этапа, которые достигают фронтенд-разработчики при работе с CSS. Первый - это « О, это все? », А второй -« Ой, это еще не все ». Вот что означает «Сложность CSS»

Здесь переплетается много мелочей, которые сложно масштабировать. Если вы создадите только один компонент, это просто - вы стилизуете все, что видите, и это работает. Но поместите этот единственный компонент в более крупное приложение, и будут применены дополнительные стили. Вы можете получить тот же класс, что и что-то еще (например, .button), и ваши стили будут применяться ко всему приложению, нарушая все. Это напряженно!

WordPress CSS: базовое руководство для начинающих

Как писать CSS: борьба с его сложностью

Есть несколько решений, которые придумали умные люди, краткий обзор:

• Соглашения об именах CSS, такие как BEM, SMACSS и другие, которые определяют правила имен классов, которые уменьшают вероятность конфликтов.
• CSS в JS - это более новый метод, который практически позволяет вам писать компоненты CSS в файлах JS (звучит плохо, плохо выглядит, но, по крайней мере, имеет смысл). В основном работает с React, Vue и другими.
• Модули CSS - это более разумный подход к CSS в JS для тех, кто собирает все стили в одном файле. Модули CSS инкапсулируют стили каждого компонента, чтобы они не могли проникнуть в другие компоненты, что упрощает повторное использование. Это также значительно снижает стресс!

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

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

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

Если вы работаете со стеком, который включает в себя библиотеку, такую ​​как React, или фреймворк, например Vue, обратите внимание на дополнительные инструменты, которые позволят вам управлять своими стилями с их помощью. Они будут отличным подспорьем для любого разработчика CSS от новичка до среднего уровня! И вы, возможно, никогда не захотите отказываться от них, если на вашем пути не появится что-то лучшее.

Следите за новыми инструментами! Они мешают нам бороться с проблемами, которые сообщество разработчиков уже обнаружило, исправило и предоставило способ решения.

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

Советы по дизайну веб-сайтов: как улучшить вашу игру в веб-дизайне

Девять признаков плохого CSS

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

Поля странные

Распространенная проблема, с которой сталкиваются разработчики, - это когда у двух элементов не складываются поля (верхнее / нижнее). Например, у нас есть два элемента <p> с полями: 20px 0 ;. Общее пространство между ними составляет 20 пикселей, а не 40. Это связано с уменьшением поля. За исключением случаев, когда элементы плавают или абсолютно позиционированы. Это «кроме» есть почти везде почти для каждого определения.

Z-index: 9999999 и все еще не на вершине z-index: 1

Прежде всего, редко возникает необходимость писать такие высокие z-индексы. Я даже видел такие значения, как 99999999999999 или больше. Во-первых, максимальное значение z-index составляет 2147483647, поэтому все, что указано выше, бесполезно. Во-вторых, так не работает. Какие элементы находятся наверху, определяется контекстом наложения, а не только значением z-индекса. См. Рисунок ниже:

Не анимация правильных свойств

Это довольно простой вопрос, но некоторые разработчики испытывают трудности с анимацией и подходом к ней. Во-первых, что можно анимировать? Все, что может иметь начальное значение, конечное значение и все, что находится между ними. Непрозрачность - это такое свойство, вы можете начинать с 0, заканчивать на 1 и добавлять бесконечные шаги, например, между 0,3, 0,6758, 0,9875 и т. Д. Вы не можете анимировать «отображение», потому что нет промежуточных шагов между инлайн и сеткой.

Неэффективная анимация

Самая распространенная причина плохого FPS при анимации - неправильные анимированные свойства. Если вы измените свойство «left» абсолютного элемента, вы будете использовать CPU для вычислений. Однако, если вы используете преобразование, то это будет графический процессор. А GPU, как мы все знаем, лучше делает графику.

Но как бы вы оживили тень, если у нее нет альтернативы, такой как left / transform? Ну анимировать непрозрачность! Имейте два элемента: один с началом, состоянием, другой с конечным состоянием. Затем уберите начало и конец. Это будет выглядеть так, как будто тень расширяется, а на самом деле она только исчезает.

По возможности НЕ анимируйте элементы, которые влияют на макет. Расчеты компоновки дороги, и ЦП может выполнять только ограниченное количество вычислений. Часто менее одного раза каждые 16 мс, что приводит к снижению FPS до 60.

Слишком глубокие селекторы

Что такое модификатор? Класс, который вы можете добавить к другому классу и заменить некоторые его свойства. Пример: .button имеет цвет: красный. .button-primary, имеет цвет: синий. Итак, когда вы добавляете .button-primary в .button, вы хотите получить синий цвет. Очень просто. Хотя не всегда бывает так просто. И не каждый раз это такой компонент.

Иногда мы хотим перезаписать компонент, дочерний элемент другого компонента на определенной странице. В итоге мы получаем что-то вроде этого: .page-name .section-name .component-1 .component-2 {…} Уже четыре уровня. Но оказывается, что мы можем просто сделать .page-name .componen-2 {…}. Короче лучше! Потому что, если по какой-то причине вам придется перезаписать этот новый стиль, вам не нужно углубляться на 5 уровней, затем на 6 и еще дальше.

Глубокие селекторы пугают, и люди в конечном итоге используют! Important. ! important следует использовать, когда вы хотите перезаписать встроенные стили, которые вы не можете контролировать. В противном случае это красный флаг, что вы что-то делаете неправильно.

Слишком большой файл

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

Включенные фреймворки, из которых используется лишь несколько свойств, также являются частой причиной больших файлов. Объедините вместе bootstrap / foundation, font-awesome, animate.css и несколько других подобных фреймворков / библиотек, и вы получите огромный файл, из которого вы используете около 2%. Убирайте, держите в порядке и используйте только то, что действительно необходимо. Часто даже в фреймворке нет необходимости.

Фреймворк, когда он не нужен

Bootstrap, Foundation, UIKit и все другие фреймворки великолепны! Они решают настоящую проблему и чрезвычайно ценны для сообщества веб-разработчиков. Нет необходимости хорошо знать HTML или CSS, чтобы создавать информационные панели и сайты. Но отойдите от этого случая, начните писать немного CSS, и вы столкнетесь с несколькими проблемами.

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

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

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

Не позволять контенту определять размер

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

Например, вы не хотите устанавливать свойство ширины сайта равным 1200 пикселей. Вы хотите установить максимальную ширину 1200 пикселей. Таким образом, область просмотра позволит вашему сайту оставаться отзывчивым.

Тогда поле ввода не должно иметь высоту 40 пикселей, оно должно иметь отступ 1em. Теперь размер шрифта, содержание - вот что определяет размер. И если содержимое внутри вырастет, элемент не сломается.

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

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

Хаки JavaScript

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

Конечно, есть стандартная функция переключения, где вы можете использовать поле ввода для изменения стилей, когда: установлен, есть фоновое наложение, которое можно легко запустить, и есть свойства, такие как счетчик, для создания более простых списков <ol> .

Совет здесь - сначала поищите решения CSS. Допустим, вы хотите создать всплывающее окно. Он отображается посередине (положение: фиксированное). Затем вы хотите закрыть его с помощью значка [X] или щелкнув по нему. В JS вам нужно будет написать события, которые будут запускаться для чего угодно, кроме всплывающего содержимого. Но все же запускается по [X], который находится во всплывающем контенте.

Вместо этого из CSS вы можете просто написать еще один <div> с размером 100vw, 100vh и z-index прямо под всплывающим окном. Затем вы можете просто указать этот div в JS, который является однострочным.

Другой пример - вам нужна кнопка, которую вы можете разместить в контенте, которая будет «расширять» любой контент, следующий за ней. Просто с CSS, немного сложнее с JS. С помощью CSS вы можете сделать что-то вроде этого:

 Label.button - визуально стилизует кнопку.

 Input: not (: checked) ~ * {display: none} - скрыть все после него в одном контейнере.

Этот бит «в одном контейнере», вам нужна собственная логика в JS. Вам также необходимо выбрать все элементы, что требует обхода дерева DOM. А затем примените к ним стили CSS, которые в конечном итоге окажутся в теге style = ””, который, в свою очередь, потребует! Important, если по какой-то причине вы должны решить их. К счастью, в CSS это очень просто.

Путь к тому, чтобы стать хорошим веб-дизайнером

Заключение

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