Источник: Dribble

Стиль мышления CSS

Перевод статьи «The CSS Mindset» Макса Бёка.

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

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

Безусловно, для написания любого кода требуется определённый образ мышления. Но декларативный характер CSS делает его особенно трудным для осознания. Особенно если вы размышляете в категориях «традиционных» языков программирования.

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

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

Для большинства людей, кто профессионально пишет CSS, такой образ мышления со временем стал привычным. У многих разработчиков случается момент «АГА!», когда всё наконец складывается в единую картину. И речь тут скорее не о безупречном знании технических особенностей, а больше об общем смысле идей языка.

Я попытался описать некоторые из них ниже.

Всё — прямоугольник

Откройте «Инструменты разработчика» и наводите курсор на каждый элемент в разметке. Вы увидите, что на экране будут подсвечиваться прямоугольники. Или задайте в стилях outline: 2px dotted hotpink для визуализации границ.

Каскадность — ваш друг

Хотя есть обоснованные причины избегать каскада, это не значит, что с ним всё плохо. По факту если использовать каскад правильно, то он сильно упростит вам жизнь.

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

Столько, сколько нужно. И как можно меньше

Избегайте ненужных стилей и вы избежите непредвиденных последствий.

У краткости длинные последствия

background-color: white;
background-image: none;
background-position: 0% 0%;
background-size: auto auto;
background-repeat: repeat;
background-origin: padding-box;
background-clip: border-box;
background-attachment: scroll;

Лучше быть точным. Если вы хотите поменять цвет фона — используйте background-color.

Всегда будьте гибкими

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

Магические числа — случайные жёсткие значения. Что-то вроде этого:

.thing {
width: 218px; /* почему? */
}

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

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

Контекст это ключ

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

Контент будет меняться

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

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

Найдите паттерны и используйте их

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

Используйте понятные имена

👉 Дисклеймер

Перевод Алёны Батицкой, редактура Вадима Макеева.

Web Standards

Сообщество разработчиков

Web Standards

Сообщество разработчиков

Workafrolic (±∞)

Written by

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Web Standards

Сообщество разработчиков

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store