Чем занимаются разработчики CSS и зачем они вам

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

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

Что делают разработчики CSS?

Начнем с основ. Почему CSS так важен и что именно должны делать разработчики CSS?

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

Написание аккуратного HTML всегда имеет значение

Написание простого, чистого и адекватно организованного HTML — это большая ответственность, потому что скромный HTML-документ — это первое, что вы предоставляете своим конечным пользователям.

Если вы пишете готовый к работе HTML-документ, вам следует постараться включить все обязательные и необязательные теги в заголовок документа, чтобы максимально использовать возможности вашего веб-сайта. Я говорю о настройке правильного типа документа, языка, метатегов, фавиконов, методов загрузки и SEO.

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

Общий дизайн часто определяет, как мы организуем различные компоненты HTML. Разработчики CSS тесно сотрудничают с дизайнерами, и не каждый дизайнер использует один и тот же инструмент для создания дизайна. Знание Sketch, Photoshop, InVision или Figma и умение «нарезать» дизайн — обязательные навыки для разработчиков CSS. Всегда следует помнить о том, как структурировать компонент, чтобы можно было одновременно применять дизайн. Использование хорошего соглашения об именах, такого как BEM или OOCSS, должно предотвратить написание раздутого HTML или неподдерживаемого кода CSS.

JavaScript повсюду

Некоторые компоненты должны быть интерактивными, например, модальные окна или всплывающие подсказки. Это часто требует хорошего понимания JavaScript, не «глубокого» JavaScript, а событий JavaScript и обработки DOM. Обработка DOM может быть сложной, потому что вы не хотите истощать ресурсы вашего пользователя и делать ваш веб-сайт вялым или, что еще хуже, давать сбой и делать его полностью невосприимчивым.

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

CSS

Это также относится и к CSS, хотя многие утверждают, что он развивается не такими темпами, как JavaScript. Однако новые функции, такие как переменные CSS, сетка CSS или даже Flexbox, требуют некоторого времени для освоения.

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

К счастью, сообщество очень полезно, а такие сайты, как Flexbugs или Gridbugs, могут сэкономить много времени.

Инструменты, методы и принципы CSS

Иногда мы могли полагаться на такие инструменты, как средства запуска задач или сборщики, такие как Grunt, Gulp и webpack, которые помогали нам создавать надежный код. Вы можете дополнить свой код линтерами, минификаторами, babel или PostCSS для транспиляции кода.

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

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

Я бы сказал, что это особенно верно при работе с CSS, и вот почему:

Если вы никогда не пытались решить проблему z-индекса, вы никогда не узнаете о стековом контексте. Если вы никогда не пытались переопределить класс Bootstrap, вы никогда не узнаете о специфичности. Если вы никогда не пытались решить проблему с плавающей запятой, вы никогда не узнаете о блочной модели.

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

Cascade — лучшая функция CSS, и она должна работать на вас, а не против вас. Некоторые разработчики обходят это, изобретая собственные подходы, такие как CSS-in-JS. Если вы упаковываете свой CSS в инкапсулированную среду, такую ​​как React, вы не можете использовать его где-либо еще. Я сомневаюсь, что это тот подход, который вы хотите использовать в своей масштабируемой платформе. Если у вас есть проблемы с каскадом, научитесь его принимать, а затем научитесь его приручать.

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

Зачем вам нужен CSS-разработчик?

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

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

Стандарты кодирования CSS

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

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

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

Реализация дизайна CSS

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

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

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

Организуйте свой CSS-код

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

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

Код CSS в продакшене

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

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

Разработчики CSS также пишут код HTML и JavaScript. Это означает, что за доставку ресурсов отвечает разработчик CSS. Разработчики CSS должны нести ответственность за загрузку шрифтов, извлечение критического CSS, использование отложенной и асинхронной загрузки JavaScript и предоставление адаптивных изображений.

Ни один из этих методов не прост в реализации, и универсального решения не существует.

Что CSS-разработчики могут сделать для вас

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

• Убедитесь, что каждый участник проекта придерживается стандарта кодирования
• Реализовать дизайн
• Организуйте код
• Напишите код
• Исправить ошибки
• Узнать о новых техниках
• Улучшить код

Подведение итогов

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

В своей статье The Great Divide Крис Койер цитирует некоторых технических лидеров, и большинство из них согласны с тем, что разделение должно быть, должна быть роль, основанная на CSS, которая не требует знания современных фреймворков JavaScript. Может помочь, если вы знаете больше, чем «просто CSS», но роль должна существовать, и ее следует принимать как равную ролям на основе JavaScript.

В конце концов, вы хотите оставить свой продукт в руках специализированного профессионала, который отполирует его до совершенства, или вы довольствуетесь достаточно хорошим качеством ?

Дальнейшее чтение в блоге Toptal Engineering:

• Как использовать анимацию SVG в CSS