Аудио версия на русском (яндекс.музыка) / iTunes

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

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

Disclaimer:
Это вольный перевод статьи.? Стиль повествования может не совпадать с таковым автора.? Никакие идеи, домыслы, факты или суждения не были убраны или добавлены.

История CSS

В десятилетие 2001-2010 годов, когда интернет завоевывал мир, CSS стоял на месте. Internet Explorer версии 6-7-8 был ведущим браузером. Microsoft в то время не уделяла большого внимания спецификациям CSS, не проявляла никакого интереса к добавлению в него новых функций. CSS оставался на уровне версии 2.1 все эти годы.

С 2007 года начали появляться современные браузеры Firefox и Chrome. Даже в это время мы всё еще должны были поддерживать Internet Explorer. Это сдерживало наше развитие. Будучи главным правящим браузером в то время, IE установил практически несуществующую, близкую к нулю, скорость разработки CSS. Это был «темный век» интернета.

Основополагающие события новой эры CSS

Я был разработчиком в то время, и потому видел два важных события которые изменили мир CSS и веба в целом:

1. Начало эры смартфонов (29 июня 2007 года) — всё началось с выпуска первого iPhone. Этот релиз вызвал необходимость поддержки новых функций CSS, которые соответствовали бы новой категории веб-устройств.
2. Выпуск браузера Chrome (2 сентября 2008 года) — Chrome был новым браузером, который начинался как десктоп приложение. ?До тех пор Internet Explorer был главным правителем интернета и диктовал его развитие.

Почему Frontend разработчики имеют дело и с CSS, и с JavaScript

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

CSS 3, HTML 5 и JavaScript: новая эра

Трудно сказать точно, когда появился CSS 3, поскольку он разрабатывался с 1999 года. Реальная поддержка в интернете началась в 2011 году. В то время Chrome & Firefox увеличивали свою долю рынка. Смартфоны становились очень популярными. Имея собственные браузеры, все они начали поддерживать первые новые функции CSS 3.

Эти изменения привели к снижению популярности Internet Explorer. В то время он все ещё был значительным браузером, однако, Microsoft понял, что должен начать уделять внимание спецификациям и разработке CSS. Они выпустили Internet Explorer 9.

Новый CSS

CSS 3 теперь 10 лет, почему нет CSS 4? CSS 3, в отличие от CSS 2.1, является открытым стандартом. Благодаря этому он постоянно обновляется. Нет никакой необходимости называть новую версию «CSS 4», так как CSS 3 — это непрерывная разработка, версия на все времена.


С 2011 года каждое обновление браузера включает в себя новые функции CSS. В последние несколько лет большинство браузеров — Chrome, Firefox, Opera, Edge — обновляются почти каждый месяц (Safari обновляется в основном раз в год). Эта частота означает, что мы получаем новые функции CSS почти сразу же, как они появляются.

Что нового появилось в CSS за последние 10 лет

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

1. Layout — адаптивный дизайн, Flexbox, CSS-гриды, многоколоночная компоновка, writing mode и логические параметры;
2. Typography — пользовательские шрифты, font-variant, line-breaking;
3. Shapes & Graphics — фильтры, маски, blend-mode, clip-path, shapes и т.д.
4. Animations & Transforms — CSS/SVG анимация, transitions, transforms, will-change.
5. Units — viewport величины vw/vh/vmin/vmax, rem, функция calc(), размерные метки contain, fit-content, min-content, max-content;
6. CSS preprocessor — sass, less, stylus, postCSS
7. и многое другое — работа с SVG, @support, CSS переменные и тому подобное.

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

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

Большая ошибка веб-индустрии

Эта ситуация, в которой frontend разработчики не смогли справиться с новой сложностью в CSS, создала новое движение под названием «Как не изучать CSS».

Новое движение под названием «Как не изучать CSS»

Первые CSS фреймворки

Начало этой ошибки положили фреймворки, такие как Bootstrap и Foundation. Первый выпуск каждого из них состоялся в 2011 году. Эта конкретная дата не случайна — это были первые годы CSS3, адаптивного дизайна, мобильных веб-сайтов и кроссбраузерной вёрстки.

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


Bootstrap HTML — большинство классов несемантичны.

Angular 2: первый JavaScript-согласованный фреймворк

Новый Angular стал первым кто ввел инкапсулированные стили. Это был способ избавить неопытного веб-разработчика от необходимости понимать каскадирование CSS. Используя этот метод, вы можете создавать глобальные стили и при этом иметь локальные стили для каждого компонента.

Из всех различных идей разработки идея инкапсулированных стилей, с моей точки зрения, является хорошей, потому что вы все еще можете создавать как глобальные стили, так и инкапсулированные стили для компонентов. Кроме того, у нас все ещё есть разделение проблем для CSS/SASS, для HTML и для JavaScript. Мы можем наслаждаться простым способом загрузки только необходимых стилей.

React — смерть семантики!

React развивает эту идею дальше и пишет весь HTML и CSS внутри JavaSscript. Цель создания многоразовых стилей умерла с React’ом. Он автоматически генерирует имена классов CSS; таким образом, код становится нечитаемым и невозможным для понимания, как из-за имен классов CSS, так и из-за несемантического HTML. С моей точки зрения, это похоже на то, как CSS и HTML писались в начале интернета, когда не имело значения, как выглядели CSS или HTML, пока они работали.


React — нечитаемые имена css классов

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

Очнитесь!

Frontend разработчики не тащат в CSS! Кто-то должен сказать это вслух! Да, я знаю, что это грубое обобщение и поэтому не на 100% правильно, но я не пытаюсь быть на 100% правильным.
Прежде чем я продолжу, вы должны узнать обо мне немного больше.


Очнитесь — frontend разработчики не тащат в CSS!

Кто я есть такой

Я начинал как frontend разработчик в начале 2007 года.
В начале 2012 года я почти полностью перестал писать JavaScript, основная причина заключалась в том, что я очень любил CSS, а JavaScript — гораздо меньше.

С 2012 года и до настоящего времени, поскольку я был сосредоточен только на CSS, я развил преимущество в этой области. За эти годы я написал много статей о CSS, основал местное CSS сообщество на 5,000 участников и провел бесчисленное количество бесед на встречах, семинарах и конференциях.


Я выступаю на конференции ConFrontJS 2019, в Варшаве, Польша

Зачем я тебе все это рассказываю? Потому что я все ещё своего рода единорог в своей стране и в веб-индустрии. Да, я получаю много благодарностей, но есть большое но! Хотя это работает для меня, потому что я хорошо известен в веб-индустрии моей страны, другим трудно стать такими же, потому что веб-индустрия все еще пытается сохранить «старое название Frontend developer» (что означает, попробуйте написать первоклассный JavaScript и CSS).

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

Веб-индустрия должна измениться

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

В чём интерес компаний?

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

В 2020 году CSS — важный навык.

Какими могут быть новые названия должностей?

За последние восемь лет я несколько раз менял должность. Я делал это, чтобы объяснить свои способности людям, которые видят мой профиль в LinkedIn.

Сначала я называл себя CSS Master (по названию сообщества, которое я основал — CSS Masters Israel). Было забавно видеть вскоре после этого объявления о работе с таким заголовком. Я понял что есть компании которые нуждаются в CSS разработчике, но не знают как его адекватно назвать.



Позже я несколько раз менял название своей должности (UI / CSS — Developer / Interface Developer/ Engineer / Architect / Expert), пытаясь вписать свои способности в название работы.

Не будьте только CSS разработчиком

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

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

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


Разнообразие прекрасно!

CSS Animations Developer — в наши дни мы можем улучшить пользовательский опыт почти без усилий, используя CSS-анимации или SVG-анимации, тем самым превращая хороший проект в фантастический. Эта работа может подойти крупным компаниям.

Это наиболее распространенные потребности для 2020 года, но есть и другие типы специализированных разработчиков, такие как:

• Sara Soueidan, SVG Expert.
• Diana Smith, её я бы назвал CSS Artist.

Их может быть больше — возможности безграничны!

В заключение

В этой статье я стремился повысить осведомленность о предмете, который, как мне кажется, еще не был освещён. Моя цель — направить веб-индустрию в нужное русло.

Кроме моей статьи, есть еще статьи на эту тему, с других точек зрения:

• The Great Divide, статья на сайте CSS Tricks: https://css-tricks.com/the-great-divide/
• What CSS Developers Do and Why You Need One, статья на сайте TopTal.com: https://www.toptal.com/css/why-you-need-a-css-developer

Напоследок

Если вам понравилась эта статья, я был бы признателен, если бы вы поделились ею с другими, чтобы эта идея могла поднять новую осведомленность в веб-индустрии.

Кто я есть такой?

Моё имя Elad Shechter, я Web разработчик, специализирусь на архитектуре CSS и HTML. Работаю для сайта investing.com.

Мой Twitter и вебсайт.