Дорогие читатели, Я признаюсь - я плохо знаю CSS.

Например, свойство text-align: center;, которое я добавляю, срабатывает не всегда. Когдя я делаю оступы вокруг блока с помощью margin: 50px;, они появляются только по бокам: справа и слева. Если требуется абсолютное позиционирование, я применяю position: absolute; и top: 0, и элемент улетает вверх страницы, а совсем не туда, куда я хотел.

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

CSS не работает

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

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

К сожалению CSS не находится в приритете, потому что:

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

CSS прощает ошибки

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

Кроме того, у меня сфомировалось ложное представление о простоте CSS после того, как я увидел “магию”, набрав следующие строки:

p {
    color: blue;
}

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

a {
    margin-top: 10px;
}

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

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

Хорошая CSS-библиотека !== хороший CSS

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

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

Обратимся к Bootstrap. Мы получаем уже готовые элементы, остается только подставлять имена классов в HTML-документы. На стороне CSS в данном случае нет практически никакой работы. И что в результате? Мы приходим в замешательство, когда приходится работать с чистыми CSS и JavaScript. Я достаточно долго не мог понять, почему в последнем случае так трудно сделать адаптивную навигационную панель, в то время, как с помощью Bootstrap, все получается легко и быстро.

Нужно изучить большое количество материалов

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

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

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

…потому что мы не разбираемся

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

Да, теперь мы знаем почему CSS не работает так, как мы хотим. Что делать?

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

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

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

Спасибо за внимание.

Создано на основе материалов оригинальной статьи Why doesn’t my CSS work the way it should?