07.10.2025 09:01
melnik909 69 9500 Источник

Хабр, привет!

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

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

Так, вы готовы? Давайте посмотрим, что я вам подготовил.

Для какого числа элементов будет применено правило?

<body>
  <div class="awesome-box">1</div>
  <div class="awesome-block">2</div>
  <div class="awesome-box">3</div>
  <div class="awesome-block">4</div>
</body>
:nth-child(2 of .awesome-box, .awesome-block) {
  outline: 0.3rem dashed lightblue;
}
Ответ

Когда мы объявляем псевдо-класс nth-child с помощью синтаксиса of S, мы передаём список селекторов. В спецификации его называют complex-selector-list. Браузеры ищут HTML-элементы, основываясь на нём.

В нашем примере сначала найдутся все элементы, у которых есть атрибут class и значения .awesome-box и awesome-block. Далее среди них браузеры применят правило ко второму элементу.

Правильный ответ: К элементу с цифрой два.

Чем псевдо-класс :user-valid отличается от псевдо-класса :valid?

Ответ

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

Например, если псевдо-класс user-valid применим к текстовому полю, то он сработает после того, как пользователь покинет поле.

Правильный ответ: Псевдо-класс :user-valid срабатывает после окончания взаимодействия пользователя с элементом формы, а псевдо-класс :valid срабатывает после готовности документной модели.

В следующем примере правило не применится, потому что в элементе div нет элемента с атрибутом id. Правда или ложь?

<body>
  <div class="awesome-block">
    <span>Великолепный текст</span>
  </div>
</body>
.awesome-block:has(span, #awesome-block) {
  background-color: lightblue;
}
Ответ

При обработке псевдо-класса :has() браузеры воспринимают указанные селекторы как список селекторов (complex-selector-list). При его составлении не важно, будет ли найден HTML-элемент или нет.

В нашем примере браузеры применят правило, потому что есть селектор span, а в HTML у элемента с классом .awesome-block есть вложенный элемент span.

Правильный ответ: Ложь. Правило применится.

В коде неправильно установлено значение для свойства display, поэтому псевдо-элемент ::before не будет отцентрирован по горизонтали и вертикали. Правда или ложь?

.awesome-block {
  display: block flex;
  min-height: 50dvh;
}

.awesome-block::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin: auto;
  background-color: tomato;
}
Ответ

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

Для его обозначения мы можем использовать три ключевых слова, а именно: block, inline и run-in.

block

Если к элементу будет применено ключевое слово block, то он становится элементом block-level.

inline

При использовании ключевого слова inline создаётся inline-level элемент. Правда есть исключение. Это значение inline.

В этом случае создаётся элемент inline box. Как описано в стандарте, это элемент inline-level, у которого в качестве внутреннего типа отображения задано ключевое слово flow.

run-in

Ключевое слово run-in создаёт элемент run-in box. По сути это тот же элемент inline box, только с определёнными правилами.

Второе ключевое слово указывает, какой тип элементов он создаёт внутри себя. В стандарте он называется display-inside. Я его буду называть внутренний тип отображения.

Существует шесть ключевых слов для обозначения. Это: flow, flow-root, flex, grid, table и ruby.

flow и flow-root

Создаётся контейнер, в котором могут существовать block-level и inline-level элементы. Разница между ними в том, что второй создаёт новый блочный контекст.

flex

Ключевое слово создаёт флекс-контейнер, в котором появляются основная и дополнительная оси. Они используются для позиционирования дочерних элементов.

grid

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

table

Специальная обёртка над блочным контейнером, создающая сетку для имитации таблицы.

ruby

Ключевое слово создаёт контейнер, внутри которого можно создать фрагмент текста, являющейся аннотацией к другому фрагменту текста.

На практике значение для свойства display можно задать двумя способами. Оба варианта будут корректными. Например, значение flex можно написать как flex или block flex.

.awesome-block {
  display: flex; /* или display: block flex */
}

Разработчики привыкли к более короткой записи flex, а браузеры видят его как block flex.

Правильный ответ: Ложь. В коде нет ошибки. Элемент будет расположен по центру по горизонтали и вертикали.

У псевдо-элемента с классом .awesome-block будет вычислено значение inline-block. Правда или ложь?

.awesome-block {
  position: fixed;
  display: inline-block;
}
Ответ

При использовании свойств position и display нужно понимать, что значения absolute и fixed трансформируют значение свойства display. Браузеры будут использовать блочные альтернативы.

В нашем примере используется значение inline-block. Его блочной альтернативой является значение block. Оно будет вычислено.

Правильный ответ: Ложь. Браузеры вычислят значение block.

Каким будет расстояние между левой границей родительского элемента и его дочерним псевдо-элементом ::before?

.awesome-block {
  box-sizing: border-box;
  width: 50rem;
  min-height: 20dvh;
  padding: 20px;
  border: 1px solid;
}

.awesome-block::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  background-color: tomato;
}
Ответ

При объявлении свойства position со значением absolute браузеры вытаскивают элемент из обычного потока документа, но не двигают его. Он остаётся на месте, где был ранее.

В нашем примере изначально элемент был сдвинут на 20px относительно левой границы родительского элемента. Это же значение сохранится после добавления свойства position.

Правильный ответ: 20px.

Координаты псевдо-элемента ::before не будут рассчитаны от вьюпорта. Правда или ложь?

.awesome-block {
  width: 50%;
  min-height: 20dvh;
  will-change: transform;
  background-color: pink;

  position: absolute;
  top: 3rem;
  left: 3rem;
}

.awesome-block::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: lightblue;
	
  position: fixed;
  top: 0;
}
Ответ

При использовании свойств top, right, bottom и left для расчётов координат браузеры используют специальную область containing block. Если мы используем свойство position со значением fixed, то вьюпорт будет являться такой областью.

Но есть ряд свойств, которые это изменят. Одним из них является свойство will-change со значением transform. По этой причине областью containing block станет элемент, у которого установлено это свойство.

В нашем примере браузеры будут элемент с классом .awesome-block. Относительно его границ будут рассчитаны координаты.

Правильный ответ: Правда. Координаты будут рассчитаны относительно границ элемента с классом .awesome-block.

Какая цель у ключевого слова safe в следующем примере?

.awesome-block {
  width: 20rem;
  min-height: 5rem;
  background-color: lightblue;
  
  display: flex;
  flex-direction: column;
  align-items: safe center;
  justify-content: center;

  overflow: hidden;
}
Ответ

По умолчанию свойства justify-content и align-items не учитывает размеры родительского элемента. В результате дочерние элементы могут выйти за его пределы.

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

Правильный ответ: Ключевое слово safe заставляет браузеры контролировать размеры родительского и дочерних элементов.

Какое значение будет вычислено для свойства background-color у элемента body?

:root {
  --page-background-color: purple;
  background-color: tomato;
}

body {
  --page-background-color: inherit;
  background-color: var(--page-background-color);
  min-height: 100dvh;
}
Ответ

Для правильного ответа нужно помнить, что для пользовательских свойств также работает механизм наследования. Они наследуют значение между друг другом, если у них одинаковое наименование. В нашем примере это --page-background-color.

По этой причине браузеры наследуют значение purple из пользовательского свойства --page-background-color из первого правила, а потом передают его в свойство background-color.

Правильный ответ: purple.

Браузеры не вычислят значение 1200px для свойства width. Почему?

:root {
  --page-width: 1200px;
}

body {
  width: calc(var(--page-width) + var(--page-default-gap, 0));
}
Ответ

При работе с математической функцией calc() нужно помнить, что значение 0 вызывает проблемы. Если оно используется для свойства, ожидающего значение типом length, и указано без единиц измерения, то будет ошибка. В стандарте сказано, что значение 0 без единиц измерения не поддерживается.

По этой причине браузеры не могут сложить два операнда.

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

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

Какое значение вычислят браузеры для свойства background-color?

<body>
  <div id="awesome-block" class="awesome-block">
    <span>Я дочерний элемент</span>
  </div>
</body>
@layer basic, components;

@layer components {

  .awesome-block {
    background-color: tomato;
  }
}

@layer basic {

  #awesome-block {
    background-color: green;
  }
}
Ответ

В нашем примере используются CSS-слои, поэтому специфичность селекторов будет рассчитана с учётом них. Есть правило, что последний объявленный слой с помощью правила @layer является самым приоритетным.

У нас это слой components. Следовательно, значение tomato будет приоритетнее, чем значение green из слоя basic.

Правильный ответ: Будет вычислено значение tomato.

Какое значение вычислят браузеры для свойств inline-size и block-size у псевдо-элемента ::before?

.awesome-block {
  inline-size: 1000px;
  min-block-size: 300px;
  background-color: pink;
  position: relative;
}

.awesome-block::before {
  content: "";
  inline-size: 50%;
  block-size: 20%;
  background-color: lightblue;
	
  position: absolute;
}
Ответ

В нашем примере используются логические свойства inline-size, block-size и min-block-size. Они являются альтернативой свойствам width, height и min-height.

.awesome-block {
  width: 1000px;
  min-height: 300px;
  background-color: pink;
  position: relative;
}

.awesome-block::before {
  content: "";
  width: 50%;
  height: 20%;
  background-color: lightblue;
	
  position: absolute;
}

Данный вид свойств реагирует на изменение направления текста. В остальном же они ведут себя как привычные свойства. Поэтому принцип расчёта значения для свойств inline-size и block-size такой же, как для widthи height.

У элементов с установленным свойством position со значением absolute значение будет рассчитано относительно элемента с нестатическим типом позиционироавния.

В нашем примере браузеры выполнят вычисления относительно элемента с классом .awesome-block.

Правильный ответ: Для свойства inline-size будет вычислено значение 500px, а для свойства block-size — 60px.

Заключение

Вот и все мои вопросы. Поделитесь в комментариях своими впечатлениями. Какие вопросы понравились, а какие нет. Интересно узнать ваше мнение.

На прошлой неделе я ещё рассказал про странные CSS свойства. Загляните, посмотрите!

Спасибо за чтение!

P. S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.

© 2025 ООО «МТ ФИНАНС»

Комментарии (69)


  1. Kwisatz
    07.10.2025 09:07
    #28929262

    Простите, вы это серьезно? Вам настолько делать нечего?


    1. melnik909 Автор
      07.10.2025 09:07
      #28929426

      Я этим 10 лет занимаюсь. Пока еще держусь


      1. space2pacman
        07.10.2025 09:07
        #28930358

        А вы на работе только CSS занимаетесь?

        Люди, которые занимаются CSS, JS, Vue, Node, SQL такие вещи вполне могут не знать но зато могут знать как загуглить специфичный CSS селектор.


        1. melnik909 Автор
          07.10.2025 09:07
          #28930552

          1. Не только

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


          1. accXak
            07.10.2025 09:07
            #28933370

            И все же - зачем разработчику знать тонкие детали проекта типа "--xyu-dzigurda", которые были нахуеверчены твоим прошлым любимчиком?


            1. melnik909 Автор
              07.10.2025 09:07
              #28933410

              Я проведу аналогию с языками. Английский, русский, и т.д. Большинство людей в России, говорят на русском, не зная правил, и делают много ошибок. Это им не мешает решать их задачи.

              Но, есть люди, кому интересно узнать об этих ошибках. Исправить их. Не из-за результата, а потому им интересно. Это их стиль жизни.

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


        1. Kwisatz
          07.10.2025 09:07
          #28932580

          Синтаксис учится за неделю, причем синтаксис чего угодно. Я давно уже даже знание языков не проверяю на собеседованиях, в том нет смысла, а тут CSS... Да в эпоху ии. На базовом уровне с CSS разберется кто угодно, в остальных случаях это нужно столь редко что помнить просто нет смысла. И это я еще не учитывая, что в статье совсем какие то безумные вещи, которые даже для меня, архитектора библиотечных компонентов, выглядят дико.


          1. dom1n1k
            07.10.2025 09:07
            #28932642

            Справедливости ради, у автора вопросы не на синтаксис, а на понимание как оно фунциклирует. Да, местами он перегибает палку, предлагая специфические примеры, которые вряд ли встретятся в проде. Но это не про синтаксис.

            На базовом уровне с CSS разберется кто угодно

            Вот это одна из причин (но не единственная конечно) нынешней плачевной ситуации с версткой.

            Фронтендеры относятся к цсс откровенно пренебрежительно, считая его чем-то очень простым и второстепенным. У нас тут тайпскрипт с типами, реакт с хуками, некст-нукст-нест и прочий графкуэль - одним словом, серьезные вещи. Цсс на их фоне выглядит легкой разминкой. И в общем-то это скорее правда, хотя последние ~3 года он развивается быстрее, чем когда-либо. И там много нюансов на понимание (не заучивание).

            Как итог, почти все на цсс просто забили. Он очень простой и легкий, но мы в нём ни черта не понимаем. Но разобраться ваще не проблема в любой момент. Но не разобрались. Такой вот парадокс.


            1. Kwisatz
              07.10.2025 09:07
              #28932648

              нас тут тайпскрипт с типами, реакт с хуками, некст-нукст-нест и прочий графкуэль

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


              1. dom1n1k
                07.10.2025 09:07
                #28932682

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

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


                1. Kwisatz
                  07.10.2025 09:07
                  #28932690

                  если он сопровождался более-менее разумными рассуждениями.

                  По CSS? Вы серьезно? Я не знаю как сказать... я могу на CSS магию творить, но на таком собесе я бы встал и ушел.

                  Ну типа как пресловутый эвент-луп

                  я не помню что такое евент луп, беглое гугление говорит мне что это подкапотность асинхронщины. Не что вроде старого доброго основного цикла while(true). Стесняюсь спросить где бы оно кому то когда то могло бы понадобится.

                  ии тебе не сильно поможет.

                  Как раз в изучении он отлично помогает, его можно попросить комментировать каждую строчку


                  1. RepppINTim
                    07.10.2025 09:07
                    #28934746

                    я не помню что такое евент луп

                    от JS-разработчика это сильно

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


                    1. Kwisatz
                      07.10.2025 09:07
                      #28935146

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

                      PS а еще у меня нет env файлов, привычной дкоументации, линтера и хаски


                  1. dom1n1k
                    07.10.2025 09:07
                    #28934972

                    я могу на CSS магию творить

                    А не надо магию. Надо надежные адаптивные лейауты с пиксель-перфект элементами. С этим, как показывает практика, у многих проблемы, потому что там зубрежки синтаксиса и классов tw недостаточно, нужно ещё понимать как оно работает.

                    В реальности: Отступы не как в макете и иконка не по центру? Ой да кто там заметит эти несколько пикселей... Двадцать пикселей? Ну пофиксим (подопрем костыльным марджином с меджик-намбером).


                    1. Kwisatz
                      07.10.2025 09:07
                      #28935160

                      Надо надежные адаптивные лейауты с пиксель-перфект элементами

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

                      Ой да кто там заметит эти несколько пикселей

                      Гнать таких бездельников, и я буду ожидать встретить таких как раз среди тех, кто назубок знает синтаксис.

                      Кстати забавны, именно это я упомянул два сообщения назад.


                      1. melnik909 Автор
                        07.10.2025 09:07
                        #28935782

                        Ну серьезно, это же элементарщина. Это было ка кто сложно 20 лет назад

                        А мне не верили, что на float легко было макет сделать! Смотрели странно


            1. Bunyaz39
              07.10.2025 09:07
              #28933852

              Согласен, ля многих фронтов css стал глупой частью работы, которую можно скинуть на фреймворк типа Tailwind или просто накидать стилей по месту. А когда приходит задача сделать что-то чуть сложнее стандартного компонента, начинается магия с !important и костылями


        1. Femistoklov
          07.10.2025 09:07
          #28932768

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

          Есть же люди, которые чисто SQL занимаются, и даже программировать на ООП-языках толком не умеют, и это никого не смущает.


    1. difinition
      07.10.2025 09:07
      #28941004

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


  1. ShamanR
    07.10.2025 09:07
    #28929366

    >К тому же они о последних нововведениях в CSS.

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


    1. melnik909 Автор
      07.10.2025 09:07
      #28929420

      У всех всё по разному. Не мог оставить без ответа!


    1. RepppINTim
      07.10.2025 09:07
      #28934732

      - "Мы поддерживаем Safari 16"

      - "Ок, тогда половину вопросов из списка можно вычеркивать, они неактуальны"


  1. urvanov
    07.10.2025 09:07
    #28929788

    А это реально прямо на собеседованиях кто-то должен ответить? Прямо сходу, без документации?


  1. urvanov
    07.10.2025 09:07
    #28929806

    Это фронтендеров тестируют?


  1. coolmenclash
    07.10.2025 09:07
    #28930044

    я надеюсь вы эти вопросу джунам задаете, иначе никак


  1. undersunich
    07.10.2025 09:07
    #28930350

    Это вопросы из серии: "Заморочки из бочки". Займитесь составлением кросвордов для журналов - уйдите из профессии ! Сколько же Вы людей на собесах завалили ! Ваше место в литературе !


  1. ofthevoid
    07.10.2025 09:07
    #28930548

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

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


  1. shadwar
    07.10.2025 09:07
    #28930612

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


  1. Akuma
    07.10.2025 09:07
    #28930838

    Лет 20 в вебе. Половину синтаксиса даже не знал и нафиг надо, честно сказать.

    Тут скорее посмотреть на реакцию , если уж на работу нанимаете.


    1. izibrizi2
      07.10.2025 09:07
      #28933786

      Ну так специально такие вопросики чтобы олдов не обидеть :)


    1. 0whitewolf0
      07.10.2025 09:07
      #28934712

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


  1. klimkovsky
    07.10.2025 09:07
    #28931084

    Да... судя по комментариям, познания в области CSS у этой этой цивилизации так себе...


  1. antirek
    07.10.2025 09:07
    #28931094

    Узкий специалист. Круто.


    1. tbl
      07.10.2025 09:07
      #28931460

      Senior CSS-верстальщик


  1. mSnus
    07.10.2025 09:07
    #28931518

    Опять люди путают собеседование с Олимпиадой


  1. Dren0r
    07.10.2025 09:07
    #28931832

    Судя по комментариям, радует, что еще не все потеряно, и любой здравомыслящий человек считает клоунадой такой собес.
    Автору желаю почаще двигать всякие :nth 100500 и гордиться этим, а не нажать ф12 и посмотреть, что и где применено


    К тому же, сказано, что вопросы о последних новвоведениях.
    А последние - это @container, @starting-style, :has, :is и тд
    ничего этого здесь нет

    "Координаты псевдо-элемента ::before не будут рассчитаны от вьюпорта. Правда или ложь?"

    Вообще неправильный ответ, все потому родитель fixed элемента с position:aboslute, потому координаты расчитываются от его левого верхнего края, а не вьюпорта
    will-change тут вообще не при чем


    1. melnik909 Автор
      07.10.2025 09:07
      #28931986

      will-change тут вообще не при чем

      Это уже ошибка. У меня есть статья со ссылками на спеку. Там всё объяснено


      1. Dren0r
        07.10.2025 09:07
        #28932172

        По поводу will-change проверил, был не прав. Так как в 99.9% вместе с absolute идут -translate-x-1/2 и -translate-y-1/2, что дают родителю трансформ и расчет идет от него, а не вьюпорта.

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


        1. melnik909 Автор
          07.10.2025 09:07
          #28932302

          По поводу will-change проверил, был не прав. Так как в 99.9% вместе с absolute идут -translate-x-1/2 и -translate-y-1/2, что дают родителю трансформ и расчет идет от него, а не вьюпорта.

          Отлично, что разобрались. Спасибо!


      1. sobeskiller
        07.10.2025 09:07
        #28934974

        Это уже ошибка.

        Ну вот ошибка, и что? Дом рухнет? Айти это такая профессия где цена ошибки крайне низка, т.к. всплывёт либо на первом же прогоне, либо дальше на кодревью, QA и т.д. Даже перфокарты уже дырявить не надо и ждать завтрашнего утра, чтобы обнаружить что "ошибка", ё-моё! Программиста зачем-то рассматривают как пилота самолёта или кардиохирга. Которые, несомненно, должны всё помнить в мельчайших деталях. Но у программиста ведь совсем другой характер работы!


        1. melnik909 Автор
          07.10.2025 09:07
          #28938952

          Ну вот ошибка, и что? Дом рухнет? 

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


  1. zweroboy1
    07.10.2025 09:07
    #28931862

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


    1. melnik909 Автор
      07.10.2025 09:07
      #28931996

      Круто! (без сарказма) Спасибо, что написали


    1. melnik909 Автор
      07.10.2025 09:07
      #28932000

      Забыл спросить. На какие вопросы смогли ответить?


      1. zweroboy1
        07.10.2025 09:07
        #28933202

        user-valid, px + 0 в калькуляторе и центрирование псевдоэлемента.


        1. melnik909 Автор
          07.10.2025 09:07
          #28933382

          Здорово! Спасибо, что поделились


  1. dom1n1k
    07.10.2025 09:07
    #28932166

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

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

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


  1. RulenBagdasis
    07.10.2025 09:07
    #28932182

    Больше 20 лет занимаюсь фронтенд/фулстек разработкой, верстки не боюсь, делаю её регулярно, но я в первую очередь программист, не верстальщик. Я бы у вас собес не прошёл, это как раз тот случай, когда половина заданий из серии "не делайте так в проде", а вторая половина на заучивание справочников.

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


  1. DmitryOlkhovoi
    07.10.2025 09:07
    #28932218

    Бедные кандидаты) ну или точней компания с таким собеседующим)

    Я конечно спрашиваю про CSS, но там вопросы на уровне block vs inline. И поехали делать дело)

    Вот и все мои вопросы. Поделитесь в комментариях своими впечатлениями. Какие вопросы понравились, а какие нет. Интересно узнать ваше мнение.

    Ваши вопросы больше похоже на понтануться перед кандидатом, понатнуться статей, а не найти человека, который нужен компании.
    Ну может можно развивать CSS с таким рвением. Но сомневаюсь, что вы как-то хоть куда-то пушили.
    Поэтому респект за знания, но я бы не тратил свое время пытаясь ответить на эти вопросы) В мире фронта и так ментальный перегруз технологиями и косяками. Еще сидеть гадать между px, em, rem, vh, dvh, layer и прочем. Задача формочку покрасить, большинство UI ваще бекофисная, где всем глубоко пофиг даже на адаптивку, лишь бы работало, показывался товар, и кнопочки кликались.

    И не забываем про реальность, где половина из этого просто не работает. Это может быть 1% от юзеров, но при этом миллионы в деньгах. И такое довольно часто происходит на сайтах с трафиком. Обмазываться пре / пост процессорами не всегда поможет


    1. 0whitewolf0
      07.10.2025 09:07
      #28934742

      На мой взгляд, достаточно поспрашивать про layout. Как работает display с разными значениями, position, z-index, понимание приоритетов селекторов. Какие псевдоклассы знает и какие кейсы приходилось решать, а если кандидат шарит за гриды, вообще песня, но знания гридов считаю до сих пор опциональным требованием, так как до сих пор по прежнему в основе используется flexbox.

      А вопросы из поста можно задавать если цель кандидата завалить :)


  1. FKV
    07.10.2025 09:07
    #28932398

    Какое значение вычислят браузеры для свойств inline-size и block-size у псевдо-элемента ::before?

    Ответ block-size — 60px сомнительный, так как нет контекста, а именно, неизвестно содержимое .awesome-block , которое может быть по высоте и 500px.


  1. cssfish
    07.10.2025 09:07
    #28932984

    ппц комплексы у автора, видимо...


  1. wd-315
    07.10.2025 09:07
    #28933384

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


  1. xsunson
    07.10.2025 09:07
    #28933470

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


    1. Hikonomuro
      07.10.2025 09:07
      #28935756

      Вопросы у ТС так же "актуальны" как у саппорта на телефоне или эникея требовать знание OSI (а это нихрена не редкость).


      1. xsunson
        07.10.2025 09:07
        #28935842

        Это вообще-то юмор. Не "на знание", а "для". И тут достаточно взглянуть на поддержку layout на caniuse. Что в него могут не только лишь все.


  1. Bunyaz39
    07.10.2025 09:07
    #28933808

    Неплохая подборка для самопроверки, хотя половина из этого в реальной жизни встречается реже, чем единорог

    :nth-child с of - красиво, но в 99% случаев задача решается добавлением одного класса - хорошо для олимпиады по css, но не для повседневной верстки


  1. farengeyt451
    07.10.2025 09:07
    #28933822

    Если на этом собеседовании будут вопросы и по js, то видимо из разряда что выведет в консоль: 'b'+'a'+ + 'a' 'a').toLowerCase()


  1. ddidwyll
    07.10.2025 09:07
    #28933854

    Вёрстка это сложно, хотя не все об этом знают. Более менее понимать возможности css, считаю, необходимо. Не знаю насчет вопросов к собеседованию, но в виде статьи полезно, спасибо. Насчет хейта не расстраиватесь, людям неприятно признавать, что их навыки ограничены, особенно если они уверены в обратном.


    1. melnik909 Автор
      07.10.2025 09:07
      #28934034

      Спасибо за поддержку! У меня только положительные эмоции. Я в целом рад, что статья вызвала интерес.


    1. Dren0r
      07.10.2025 09:07
      #28934556

      Верстка сложно - если городить код из примеров на чистом css и в одном файле на 5к строк.
      В проде с возможностями фреймворков, пре процессоров, вариаций encapsulation внутри одного компонента, все это очень просто. А что-то сложное уже делается на джсе с GSAP и подобными библиотеками.

      Достаточно отличать блок от грида с флексом, паддинг от маргина, и знать, как вертикально центрировать. За неделю можно выучить весь пул классов tailwind и больше не задаваться вопросами "что же тут выведет?"


  1. RepppINTim
    07.10.2025 09:07
    #28934708

    Классический список вопросов, чтобы почувствовать себя умным на собеседовании и завалить кандидата. Вместо того чтобы дать простую бизнес-задачу и посмотреть, как человек ее решит, мы будем гонять его по @layer и will-change. Идеальный способ нанять теоретика, а не инженера


  1. adminNiochen
    07.10.2025 09:07
    #28936252

    Надо использовать на собесах как чек того, юзает ли кандидат чатгпт как подсказку. Если ответит - сто процентов мухлюет))


  1. AnKu_11
    07.10.2025 09:07
    #28936898

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

    В следующем примере правило не применится, потому что в элементе div нет элемента

    Можно ведь задать вопрос: применится ли правило в …

    Тут можно дать неверный ответ, тупо из-за кривой формы построения вопроса.


    1. urvanov
      07.10.2025 09:07
      #28937680

      Вас за одну только постановку вопроса с двойным отрицанием надо в отдельный котел.

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


  1. rakot
    07.10.2025 09:07
    #28937576

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


    1. Kwisatz
      07.10.2025 09:07
      #28938418

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


      1. melnik909 Автор
        07.10.2025 09:07
        #28938920

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

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

        Я самоучка, знаю, что такое учиться. На беседе со мной вполне нормально говорить "не знаю". Карательных мер не будет. Наоборот я разверну эту тему и сделаю так, чтобы человеку было интересно.

        Это конечно при условии, если человек интересуется. Если CSS ему не интересен, то я не мучаю. Даю фидбек "CSS не интересен. Развиваться в нем не хочет". И такой мой фидбек часто снимает вопросы, потому что нет смысла насиловать человека тем, в чем он не заинтересован.

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


        1. Kwisatz
          07.10.2025 09:07
          #28939058

          Только вы зря меня к их числу причислили

          Не уверен что это так.

          Моя задача проверить знание CSS

          В моей картине мире по важности это где то на 435 месте, я выше это расписал.

          Я самоучка, знаю, что такое учиться.

          Я тоже, но у вас не было бы шанса со мной побеседовать.

          Я сделал вывод, что вам интересна эта тема.

          Интересна? Как разработка в целом.

          Следовательно можно развернуться ее.

          У вас на проекте нужно большую часть времени оптимизировать запросы? Вы именно это хотите спросить CTO/тимлида/архитектора?

          Также задать вопросы, которые другим покажутся херней

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

          а вам будет интересно на них ответить

          Знаете я давным давно бросил квизы и прочие что где когда. Мой мозг просто не занимается бессмысленной работой.


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