Мы знаем, что современные и интересные материалы для разработчиков быстрее выходят на английском. Поэтому решили помочь тем, кто еще только изучает этот язык, также быть в теме и перевели для вас статью Андреса Галанте: 5 things CSS developers wish they knew before they started. Вся статья написана и переведена от имени автора. А еще в конце вы найдете список английских слов, которые могут вызвать больше всего трудностей при чтении и переводе данной статьи. Итак, приступим!

Уна Кравец, фронт-энд девелопер и специалист в сфере UI, написала в своем твиттере, что можно выучить все, что угодно, но не все на свете. Она также считает, что стоит сконцентрироваться лишь на том, что действительно важно.

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

Вот список вещей, о которых я (автор статьи) хотел бы знать, если бы пришлось начинать все сначала.

1. Не стоит недооценивать CSS

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

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

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

CSS как медвежонок: милый и безобидный, но, когда вырастет, сожрет вас живьем.

• Учитесь читать код до того, как писать и выкладывать его.
• Быть в теме современных практик — это ваша ответственность.
• MDN, W3C, A List Apart, и CSS-Tricks — вот ваши источники дельной информации.
• У вэба нет формы; все устройства отличаются. Радуйтесь разнообразию и всему тому, что нас окружает.

2. Делитесь и принимайте участие

Очень важно делиться! Как бы мне хотелось, чтобы кто-то рассказал об этом в самом начале. У меня ушло 10 лет, чтобы понять ценность советов; а когда я все осознал, то полностью изменил подход к своей работе и сотрудничеству с остальными.

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

Делитесь всем, что учите. Такой путь также важен, как и конечный результат; даже мельчайшие детали могут принести пользу остальным.

• Изучайте Git. Git — это язык открытого исходного кода и вам точно стоит быть частью этого.
• Участвуйте в проектах с открытым исходным кодом.
• Делитесь! Напишите блог, документацию или посты в твиттере; выступайте на митапах и конференциях.
• Найдите партнера, которому будете подотчетны, чтобы он обязательно побуждал вас чем-то делиться.

3. Выбирайте правильные инструменты

Ваш редактор кода должен стать продолжением вашего разума.

Неважно, пользуетесь ли вы Atom, VSCode или олдскульным Vim; чем лучше вы связываете свой инструмент с вашим мыслительным процессом, тем более продвинутыми вы станете. И вы не только быстрее выполните работу, но и получите постоянный поток мыслей вместе с массой идей.

Терминал — это ваш друг.

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

• Исследуйте, какая среда лучше для вас подходит. Есть текстовые редакторы высокой производительности (как Vim или варианты, которые проще в использовании — Atom или VSCode).
• Выбирайте свой способ работы с терминалом и изучайте CLI как можно скорее. Короткая книга “Working the command line” — это отличный вариант для старта.

4. Изучите браузер

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

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

Все браузеры разные; изучите и полюбите их отличия. За то, какими они есть. (Да, даже IE).

• Уделите время на изучение браузера, который станет вашим инструментом.
• Вам не удастся завладеть каждым устройством в мире; раздобудьте аккаунт BrowserStack или CrossBrowser Testing, это того стоит.
• Установите себе все браузеры, которые сможете и изучайте, как каждый из них рендерит ваш код.

5. Учитесь писать CSS, который можно сопровождать

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

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

Помните, что модульная архитектура приводит к независимым модулям, хорошей производительности, доступным структурам и адаптивным компонентам (еще это называют CSS happiness).

• Изучайте структуры CSS, следите за трендами и вырабатывайте свою точку зрения!
• Следите за такими людьми в CSS, как Harry Roberts, Una Kravets, Brad Frost, Ben Frain, Sara Soueidan, Chris Coyier, Eric Meyer, Jen Simmons, Rachel Andrew и многими другими.

Будущее выглядит радужно

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

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

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

• maintain — сопровождать (а еще ремонтировать и налаживать)
• maintainable — тот, который можно сопровождать (и ремонтировать, и налаживать)
• deliver — выкладывать (можно еще перевести как поставлять, доставлять)
• internationalization — локализация (интернационализация тоже вариант, но в другом контексте)
• browser live refresh — моментально применение изменений в браузере (фух, перевели!)
• specifity — приоритет применения правил (а больше похоже на специфичность)
• eye-opening — невероятный, неимоверный и так далее (и да, можно перевести, как раскрывающий глаза)
• look around — осматривать, оглядеться, присмотреться (но еще можно перевести как изучить то, что нас окружает)
• master — освоить, досконально изучить (да, это глагол, а не мастер)
• reach out to — достучаться, постучаться в личку, написать и так далее.

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

Подарки для читателей

Онлайн-курсы

Мы дарим вам доступ на три месяца к курсу английского для самостоятельного изучения «Онлайн курс». Для получения доступа просто перейдите по ссылке до 31 декабря 2017 года.

Индивидуально по Скайпу

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