Как стать суперзвездой в CSS

Перевод статьи «Follow these steps to become a CSS Superstar».

Как стать суперзвездой в CSS

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

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

Почему важно изучать CSS правильным образом

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

Вы начнете постоянно гуглить элементарные вещи вроде «как отцентрировать два блока div» или «как выровнять div и текст по вертикали», а затем копипастить код со StackOverflow или CodePen. Когда flexbox еще не был столь популярен, вопрос «Как выровнять div одновременно по вертикали и горизонтали?» был классическим для собеседований. Многие новички справлялись с горизонтальным выравниванием, но лишь некоторым удавалось выровнять блок и по вертикали.

План действий

1. Основы

Если вы только начинаете учиться веб-разработке, изучите основы HTML, прежде чем браться за CSS. Когда дойдете до CSS, почитайте теорию – о том, что такое CSS, как он работает в браузере, как он используется и каков его базовый синтаксис.

Познакомьтесь с различными стилями и их различиями, селекторами и базовыми вещами вроде font-size, width, height и т. п.

Начать изучение CSS можно по руководствам от MDN.

2. Блочная модель CSS

Далее следует разобраться в основах блочной модели CSS и связанных с ней свойствах, таких как margin, border, padding и т. д.

3. Изображения и фон

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

<img src="../images/wallpaper.jpg" >
<div class="image" > </div>
.image {
background-image: url(../images/wallpaper.jpg);
}

4. Display и Position (отображение и позиционирование)

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

 display: block | inline | inline-block | table | etc

Разберитесь, как используется каждое из этих значений свойства display. Вы заметите, что некоторые HTML-элементы (такие как <div>, <p> или <h1>) ведут себя как display: block, а другие (такие как <img> или <span>) – как display: inline.

position: static | absolute | relative | fixed | sticky

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

Этот шаг настолько важен, что его стоит повторять снова и снова, пока не поймете и не запомните!

float: left | right

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

5. Цвета, шрифты, списки и таблицы

Разберитесь в различных форматах записи значений цвета, таких как коды HEX, rgb, rgba, hsl, hsla, transparent и т. д.

color: white;
color: #fff;
color: rgb(255, 255, 255);
color: rgba(255, 255, 255, 1);
color: hsl(0, 100%, 100%);
color: hsla(0, 100%, 100%, 1);
color: transparent;

Научитесь использовать различные шрифты. Некоторые из них доступны не во всех браузерах, поэтому стоит научиться добавлять шрифты вручную с помощью файлов woff или ttf или импорта шрифтов Google.

С помощью CSS можно превратить ненумерованный список <ul> в прекрасную панель навигации! А таблицы еще несколько лет назад использовались для создания макетов экрана – слава богу, что все поменялось!

6. Псевдоклассы и комбинаторы

Псевдокласс в CSS это ключевое слово, добавленное к селектору и определяющее особое состояние выбранного элемента (или нескольких элементов). Псевдокласс может быть простым, как :hover или :visited, или более сложным, как :nth-last-of-type(odd).

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

/* all the paragraph elements inside the container will have color red */
.container > p {
color: yellow;
}

7. Отладка и Dev tools (инструменты разработчика)

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

Chrome Dev tools это прекрасный инструмент для веб-разработчиков. Он имеет много отличных функций для отладки вашего сайта в режиме реального времени, а также встроенные инструменты для проверки производительности, такие как lighthouse.

8. Практика, практика, практика

Практика в CSS
Photo by David Rangel on Unsplash

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

9. Отзывчивый (responsive) веб-дизайн

Отзывчивый дизайн
credit: Wikipedia

Мы научились работать с CSS в десктопных приложениях, но есть много устройств, с которых пользователи могут заходить на наши сайты. Поддержка этих устройств не менее важна. До того как отзывчивый дизайн приобрел сегодняшнюю популярность, разработчики создавали отдельные версии сайтов для мобильных устройств, для сенсорных устройств и т. д. Помните m.facebook.com и touch.facebook.com?

Есть три важные вещи, касающиеся отзывчивого веб-дизайна:

Fluid-макеты («жидкие макеты»)

Ширина, установленная в px, не масштабируется в зависимости от ширины окна браузера. Чтобы элементы страницы меняли размер в зависимости от размеров окна браузера, нужно создавать fluid-макеты, устанавливая размеры в % или единицах rem.

Медиа-запросы

Медиа-запрос это техника включения блока CSS-свойств только при определенных условиях. Мы устанавливаем точки останова (breakpoints) на основе нашего дизайна и меняем CSS в зависимости от ширины браузера.

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

Отзывчивые изображения

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

10. Flexbox и Grid

Flexbox был представлен около 10(!) лет назад, однако применяться начал только недавно, в 2015 году (источник).

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

Для создания макета, который вы увидите ниже, потребовалось бы больше 300 строк CSS-кода, если бы не Flexbox или Grid.

See the Pen A simple grid layout by Preetish HS (@preetishhs) on CodePen.

11. Преобразования, переходы и анимации

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

До выхода CSS3 анимации делались, главным образом, с помощью jQuery – библиотеки JavaScript. Теперь CSS стал настолько мощным, что мы можем делать сложные анимации и без JavaScript.

See the Pen Character Animation in Pure CSS by Aakash Rodrigues (@aakashrodrigues) on CodePen.

12. Препроцессоры

Препроцессоры CSS это скриптовые языки, расширяющие собственные возможности CSS. Благодаря им мы можем использовать логику в нашем CSS-коде, т.е. переменные, вложенность, наследование, mixins, функции и математические операции. Среди самых популярных препроцессоров можно назвать SASS, LESS, STYLUS и POSTCSS.

SCSS – формат SASS – используется более широко, чем другие, так что изучение стоит начать с него.

Autoprefixer – плагин POSTCSS – делает ваши CSS-правила совместимыми с различными браузерами. Для этого он добавляет в код дополнительные правила, такие как -moz- и -webkit-.

13. Фреймворки

Изучение фреймворков, таких как Bootstrap, Semantic-UI или Materialize, опционально. Однако изучить их все же очень полезно для ускорения разработки, поскольку они предоставляют множество стилей и макетов «из коробки».

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

14. Специфичность

«Пытаешься изменить стиль кнопки в bootstrap, тебе это не удается. Гуглишь решение, используешь !important и думаешь, что справился со всеми проблемами!» – и в результате заваливаешь свой проект.

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

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

<style>
div.wrapper p.paragraph {
color: pink;
}
#container p{
color: violet;
}
p {
color: green;
}
.paragraph {
color: yellow;
}
</style>
<div class="wrapper" id="container">
<p class="paragraph"> This is a dummy text </p>
</div>

Как вы думаете, какого цвета будет параграф?

15. Архитектура CSS

Писать CSS-код легко, а вот писать поддерживаемый CSS-код сложно. Нужно использовать правильную структуру и методы.

Существуют архитектурные шаблоны CSS – BEM, OOCSS, SMACSS и др. Вы можете почитать их документацию и выбрать шаблон, который будет больше соответствовать вашему вкусу и нуждам вашего проекта.

Вот и все!

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

1 комментарий к “Как стать суперзвездой в CSS”

  1. Аноним

    6 пункт непонятно.

    /* all the paragraph elements inside the container will have color red */
    .container > p {
    color: yellow;
    }

    Красный или желтый?

Оставьте комментарий

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

Прокрутить вверх