Аудио версия на русском (яндекс.музыка) / iTunes
В последние десять лет CSS сильно разросся путём добавления всё большего числа возможностей, таким образом постепенно становясь довольно сложным и запутанным. CSS наших дней сильно отличается от CSS десятилетия 2001-2010 годов.
Прежде чем я начну объяснять, почему миру нужны разработчики CSS, мы должны вернуться назад и посмотреть на историю CSS.
В десятилетие 2001-2010 годов, когда интернет завоевывал мир, CSS стоял на месте. Internet Explorer версии 6-7-8 был ведущим браузером. Microsoft в то время не уделяла большого внимания спецификациям CSS, не проявляла никакого интереса к добавлению в него новых функций. CSS оставался на уровне версии 2.1 все эти годы.
С 2007 года начали появляться современные браузеры Firefox и Chrome. Даже в это время мы всё еще должны были поддерживать Internet Explorer. Это сдерживало наше развитие. Будучи главным правящим браузером в то время, IE установил практически несуществующую, близкую к нулю, скорость разработки CSS. Это был «темный век» интернета.
Я был разработчиком в то время, и потому видел два важных события которые изменили мир CSS и веба в целом:
В то время была довольно распространена идея того, что Frontend разработчики должны управлять всеми возможностями клиента. Тогда было только несколько правил CSS. В настоящее время CSS расширился, и такое видение больше не актуально.
Трудно сказать точно, когда появился CSS 3, поскольку он разрабатывался с 1999 года. Реальная поддержка в интернете началась в 2011 году. В то время Chrome & Firefox увеличивали свою долю рынка. Смартфоны становились очень популярными. Имея собственные браузеры, все они начали поддерживать первые новые функции CSS 3.
Эти изменения привели к снижению популярности Internet Explorer. В то время он все ещё был значительным браузером, однако, Microsoft понял, что должен начать уделять внимание спецификациям и разработке CSS. Они выпустили Internet Explorer 9.
CSS 3 теперь 10 лет, почему нет CSS 4? CSS 3, в отличие от CSS 2.1, является открытым стандартом. Благодаря этому он постоянно обновляется. Нет никакой необходимости называть новую версию «CSS 4», так как CSS 3 — это непрерывная разработка, версия на все времена.
С 2011 года каждое обновление браузера включает в себя новые функции CSS. В последние несколько лет большинство браузеров — Chrome, Firefox, Opera, Edge — обновляются почти каждый месяц (Safari обновляется в основном раз в год). Эта частота означает, что мы получаем новые функции CSS почти сразу же, как они появляются.
В последние десять лет появилось много новых спецификаций для разных типов
модулей CSS, например:
Можно заметить, что многие новые функции попадают под ответственность frontend разработчика. Это значит, что он должен получить опыт во всех из них. А ведь это даже не полный список.
В реальной жизни веб-разработчика практически невозможно иметь даже базовый уровень понимания всех этих новых функций.?Помимо этого, параллельно развивался JavaScript. И развивался он, возможно, даже больше, чем CSS. Это делает его ещё более трудным для одного человека, чтобы идти в ногу со всеми разработками.
Эта ситуация, в которой frontend разработчики не смогли справиться с новой сложностью в CSS, создала новое движение под названием «Как не изучать CSS».
Начало этой ошибки положили фреймворки, такие как Bootstrap и Foundation. Первый выпуск каждого из них состоялся в 2011 году. Эта конкретная дата не случайна — это были первые годы CSS3, адаптивного дизайна, мобильных веб-сайтов и кроссбраузерной вёрстки.
Я никогда не пытался глубоко погрузиться в Bootstrap, так как мне никогда не нравилось его несемантическое соглашение об именовании CSS. Помогая другим веб-разработчикам в сообществе, я быстро понял, что Bootstrap подходит только для тех случаев, когда вы используете его как есть, не пытаясь настроить под себя.
Bootstrap HTML — большинство классов несемантичны.
Новый Angular стал первым кто ввел инкапсулированные стили. Это был способ избавить неопытного веб-разработчика от необходимости понимать каскадирование CSS. Используя этот метод, вы можете создавать глобальные стили и при этом иметь локальные стили для каждого компонента.
Из всех различных идей разработки идея инкапсулированных стилей, с моей точки зрения, является хорошей, потому что вы все еще можете создавать как глобальные стили, так и инкапсулированные стили для компонентов. Кроме того, у нас все ещё есть разделение проблем для CSS/SASS, для HTML и для JavaScript. Мы можем наслаждаться простым способом загрузки только необходимых стилей.
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 минут и с более производительным кодом.
За последние восемь лет я несколько раз менял должность. Я делал это, чтобы объяснить свои способности людям, которые видят мой профиль в LinkedIn.
Сначала я называл себя CSS Master (по названию сообщества, которое я основал — CSS Masters Israel). Было забавно видеть вскоре после этого объявления о работе с таким заголовком. Я понял что есть компании которые нуждаются в CSS разработчике, но не знают как его адекватно назвать.
Позже я несколько раз менял название своей должности (UI / CSS — Developer / Interface Developer/ Engineer / Architect / Expert), пытаясь вписать свои способности в название работы.
В наши дни у нас есть несколько типов разработчиков, которые специализируются на визуальной части, такой как CSS и, к примеру, SVG. Я попытаюсь определить эти типы здесь:
CSS Developer — это название предназначено для специалистов среднего звена в CSS. Это разработчики, которые могут взять дизайн и легко преобразовать его в CSS.
CSS Architect — эта категория предназначена для разработчиков, таких как я, которые, помимо эффективного построения CSS, являются экспертами в планировании разделения CSS и его построения в сложную строительную структуру. В отличие от разработчиков CSS, архитекторы CSS более опытны и знают, как умно масштабировать большие проекты, с дополнительными CSS разработчиками, работающими в их команде. Кроме того, они общаются с другими веб-разработчиками, менеджерами проектов и веб-дизайнерами.
Разнообразие прекрасно!
CSS Animations Developer — в наши дни мы можем улучшить пользовательский опыт почти без усилий, используя CSS-анимации или SVG-анимации, тем самым превращая хороший проект в фантастический. Эта работа может подойти крупным компаниям.
Это наиболее распространенные потребности для 2020 года, но есть и другие типы специализированных разработчиков, такие как:
Их может быть больше — возможности безграничны!
В этой статье я стремился повысить осведомленность о предмете, который, как мне кажется, еще не был освещён. Моя цель — направить веб-индустрию в нужное русло.
Кроме моей статьи, есть еще статьи на эту тему, с других точек зрения:
Если вам понравилась эта статья, я был бы признателен, если бы вы поделились ею с другими, чтобы эта идея могла поднять новую осведомленность в веб-индустрии.
Моё имя Elad Shechter, я Web разработчик, специализирусь на архитектуре CSS и HTML. Работаю для сайта investing.com.
Мой Twitter и вебсайт.
В последние десять лет 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 и веба в целом:
- Начало эры смартфонов (29 июня 2007 года) — всё началось с выпуска первого iPhone. Этот релиз вызвал необходимость поддержки новых функций CSS, которые соответствовали бы новой категории веб-устройств.
- Выпуск браузера 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, например:
- Layout — адаптивный дизайн, Flexbox, CSS-гриды, многоколоночная компоновка, writing mode и логические параметры;
- Typography — пользовательские шрифты, font-variant, line-breaking;
- Shapes & Graphics — фильтры, маски, blend-mode, clip-path, shapes и т.д.
- Animations & Transforms — CSS/SVG анимация, transitions, transforms, will-change.
- Units — viewport величины vw/vh/vmin/vmax, rem, функция calc(), размерные метки contain, fit-content, min-content, max-content;
- CSS preprocessor — sass, less, stylus, postCSS
- и многое другое — работа с 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 и вебсайт.
phil_b Автор
Мне нравится переводить статьи на тему истории фронтенда, как всё пришло к тому что есть сейчас, с разными размышления филосовского характера,
— я неуверен что корректно проставляю хабы и теги к таким переводам здесь на хабре.
Подскажи, пожалуйста, какие хабы и теги будут самыми уместными если текущие кажутся тебе неподходящими.