18 советов по CSS, которые сделают жизнь разработчика проще


Оглавление (нажмите, чтобы открыть):

10 советов по CSS для WEB-разработчика

Здравствуйте, уважаемые читатели XoZbloga! Спустя месяц отдыха, я приступаю к новому, так сказать сезону в работе. Постараюсь радовать Вас хорошими статьями и уроками �� Как и в любом другом деле, в веб-разработке есть свои тонкости. И чтобы достичь желаемого результата необходимо знать их. В этой статье дам 10 советов, которые могут помочь Вам при разработке стилей CSS.

1) @media

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

2) background-size

Еще одним чрезвычайно полезным свойством CSS3 является background-size . Благодаря этому свойству можно масштабировать фоновое изображение как угодно.

3) @font-face

Вы все еще пользуетесь стандартными шрифтами? Тогда мы идем к Вам! Это шутка конечно же, но действительно «грех» не воспользоваться свойством CSS @font-face и установить на своем сайте те шрифты, которые лучше всего подходят к разработанному дизайну и будут выглядет одинаково в разных браузерах и на разных устройствах. Все, что нужно — найти или создать шрифт и подцепить его к странице с помощью CSS @font-face. Также можно воспользоваться сторонними сервисами, такими как Google Web Fonts.

Более подробно о пользовательских шрифтах — http://xozblog.ru/2012/09/font-face/

4) margin: 0 auto

Удивительно, что до сих пор не разработано свойств для центрирования блок элемента ( div ). Поэтому приходится прибегать к ухищрениям, вот один из лучших способов как отцентрировать div по отношению к его родителю.

5) overflow: h >

Бывает необходимо чтобы размеры блочного элемента оставались нетронутыми, т.е. не увеличивались под действием содержимого: будь то текст или изображение. Решается это просто свойством overflow со значением hidden. Также у этого свойства есть и другие значения, например можно сделать полосу прокрутки (значение scroll).

6) .clearfix

Для тех ситуаций когда overflow: hidden не работает, можно воспользоваться методом Clearfix. Название класса может быть любым, не обязательно clearfix.

7) color: rgba()

Используя RGBa CSS можно придать прозрачность цвету, что невозможно при использовании шестнадцатеричное значение ( #fafcdc ). Для создания цвета надо указать значения составляющих цветов: красного, зеленого и синего, а также выставить альфа параметр. 1 — полностью не прозрачный, 0 — полностью прозрачный, соответственно 0.5 — прозрачный на половину.

8) input[type=»text»]

При разработке дизайна грамотно применяйте css селекторы, это позволит сократить и оптимизировать код. И в целом стремитесь минимизировать количество кода, ведь это залог хорошего программирования) Благодаря селектору приведенному выше, выбираются все поля с типом text и им задается ширина 200px.

9) transform: rotate(30deg)

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

Более подробно о CSS анимации и свойстве transform: http://xozblog.ru/2012/06/transform/

Ничто не может испортить дизайн больше, чем пунктирные линии вокруг ссылки при нажатии. С помощью outline: none этого можно избежать.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Пять наиболее раздражающих аспектов CSS

CSS кажется простым и понятным, пока вам не приходится делать что-то нестандартное. Вот еще один взгляд на проблемы CSS. Это перевод статьи «5 Most Annoying Things with CSS».

В 1996 основные браузеры поддерживали CSS лишь частично, и из-за этого веб-дизайнеры были вынуждены придумывать кучу хаков и обходных путей, чтобы их стили работали так, как они хотели. Фактически только с 1999 года каждый браузер наконец стал поддерживать CSS1 полностью. IE 5.0 для Макинтош, выпущенный в марте 2000 года, стал первым браузером, достигшим полной поддержки спецификации CSS1. CSS2 был выпущен в 1999 году, но дизайнеры не решались использовать его повсеместно из-за неполной поддержки стандарта браузерами.

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

К счастью, кроме усилий W3C по улучшению спецификации в соответствии с требованиями разработчиков, сообщество само разработало множество решений для улучшения и упрощения работы с CSS в сложной среде. SASS, Stylus, LESS ввели в обиход циклы, примеси и функции. Внедрение переменных CSS упростило написание сложных стилей, улучшило читаемость и упростило поддержку.

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

Даже сегодня, называя себя «fullstack разработчиком» или «front-end разработчиком», с опытом работы в год или восемь лет, вы все равно столкнетесь с ситуацией, когда CSS заставит вас попотеть.

Я перечислю некоторые крупные проблемы CSS:

CSS ориентирован на разметку, не на дизайн

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

Браузерные войны

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

  • Всегда используйте Normalize.css. Он заставляет браузеры отрисовывать все элементы более предсказуемо и в соответствии с современными стандартами. Он точно затрагивает только элементы, которые нуждаются в нормализации.
  • Вы можете использовать фреймворки типа Bootstrap, Bulma и Materialize. По большей части они хорошо совместимы с большинством браузеров.
  • Используйте генераторы кода CSS3. Они помогают разработчикам писать кроссбраузерные участки кода для разных свойств CSS3. Они дают разработчикам широкие возможности кастомизации, включая border-radius, text-shadow, RGBa, box sizing. Один из сервисов — CSS3 Generator.
  • Валидация: сервис валидации W3C валидирует разные версии XHTML и HTML, выводя кучу важных ошибок и сообщений, чтобы помочь разработчикам создавать отличные сайты. W3C Validator: http://validator.w3.org
  • W3C Css Validator: http://jigsaw.w3.org/css-validator
  • Тестирование: поскольку практически невозможно руками протестировать сайт во всех возможных браузерах и операционных системах, на помощь приходят инструменты кроссбраузерного тестирования! Вы можете использовать Browsershots, BrowserStack, Cross Browser Testing и подобные сервисы для тестирования.

Отзывчивый макет

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

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

  • Отдавайте приоритет важному контенту и скрывайте маловажные детали на малых экранах. Я считаю, что важнее всего показывать самое важное на небольших экранах. Иногда удалить часть контента на мобильных невозможно, тогда стоит предусмотреть возможность его скрытия.
  • Используйте SVG. В отличие от традиционных изображений, вроде PNG или JPEG, SVG легко масштабируется без потери качества. Кроме того, часто они меньше размером, так что вы немного повысите скорость загрузки сайта.
  • Когда дело доходит до взаимодействия с пользователем, фокусируйтесь на том, чтобы предоставлять достаточно большие контролы (поля вводы, кнопки, переключатели).
  • Для смартфонов по возможности делайте кнопки не меньше 44px, как это рекомендуется в iOS Human Guidelines
  • Протестируйте дизайн на минимум пяти пользователях, используя их привычные устройства.
  • Используйте фреймворки типа Bootstrap. С ними создание пригодного для мобильных устройств сайта становится намного проще. Использование готовых классов из Bootstrap поможет вам определиться с сеткой и размещением контента.

Сделайте красный более синим

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

  • Создание анимированных прототипов — хороший вариант показать ваши идеи. Используйте программы вроде Adobe XD, Sketch, InVision и так далее. Начинайте разработку только после согласования дизайна.
  • Будет разумно с самого начала спланировать весь процесс разработки. Вероятнее всего, в процессе придется добавить время на разные неожиданности. Помните закон Мерфи: «Что может пойти не так — пойдет не так».
  • Сохраняйте спокойствие. Не позволяйте эмоциям взять над собой верх. Просто помните, что клиент не заканчивал художественную школу, и может не понимать, что красный текст на зеленом фоне не улучшает читаемость. Объясняйте свои решения касательно визуальной иерархии, типографики и всего, что могут затронуть изменения.
  • Помните, что сайт — для вашего клиента, а ваша цель — сделать клиента довольным сайтом. Лучшее, что вы можете сделать — дать свои рекомендации касательно изменений. Если вы не согласны, просто сделайте все, что можно, чтобы сайт выглядел максимально хорошо.

CSS недооценен

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

Я работала с несколькими изумительными бэкенд-инженерами, которые знали каждый паттерн ООП в книге, но намертво застревали с позиционированием и float, и считали отзывчивый CSS чем-то вроде черной магии. Так что я нахожу этот комикс очень точным.

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

Как я говорила в своей предыдущей статье «Troubleshooting CSS», работа с CSS и получение хороших результатов от работы с CSS — две большие разницы. С CSS легко начать, но мастерство потребует усилий. Это то, что требует минуту на знакомство и всю жизнь (с преувеличением) на мастерство.

CSS кажется простым и понятным, пока вам не приходится делать что-то нестандартное. Вот еще один взгляд на проблемы CSS. Это перевод статьи «5 Most Annoying Things with CSS».

В 1996 основные браузеры поддерживали CSS лишь частично, и из-за этого веб-дизайнеры были вынуждены придумывать кучу хаков и обходных путей, чтобы их стили работали так, как они хотели. Фактически только с 1999 года каждый браузер наконец стал поддерживать CSS1 полностью. IE 5.0 для Макинтош, выпущенный в марте 2000 года, стал первым браузером, достигшим полной поддержки спецификации CSS1. CSS2 был выпущен в 1999 году, но дизайнеры не решались использовать его повсеместно из-за неполной поддержки стандарта браузерами.

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

К счастью, кроме усилий W3C по улучшению спецификации в соответствии с требованиями разработчиков, сообщество само разработало множество решений для улучшения и упрощения работы с CSS в сложной среде. SASS, Stylus, LESS ввели в обиход циклы, примеси и функции. Внедрение переменных CSS упростило написание сложных стилей, улучшило читаемость и упростило поддержку.

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

Даже сегодня, называя себя «fullstack разработчиком» или «front-end разработчиком», с опытом работы в год или восемь лет, вы все равно столкнетесь с ситуацией, когда CSS заставит вас попотеть.

Я перечислю некоторые крупные проблемы CSS:

CSS ориентирован на разметку, не на дизайн

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

Браузерные войны

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

  • Всегда используйте Normalize.css. Он заставляет браузеры отрисовывать все элементы более предсказуемо и в соответствии с современными стандартами. Он точно затрагивает только элементы, которые нуждаются в нормализации.
  • Вы можете использовать фреймворки типа Bootstrap, Bulma и Materialize. По большей части они хорошо совместимы с большинством браузеров.
  • Используйте генераторы кода CSS3. Они помогают разработчикам писать кроссбраузерные участки кода для разных свойств CSS3. Они дают разработчикам широкие возможности кастомизации, включая border-radius, text-shadow, RGBa, box sizing. Один из сервисов — CSS3 Generator.
  • Валидация: сервис валидации W3C валидирует разные версии XHTML и HTML, выводя кучу важных ошибок и сообщений, чтобы помочь разработчикам создавать отличные сайты. W3C Validator: http://validator.w3.org
  • W3C Css Validator: http://jigsaw.w3.org/css-validator
  • Тестирование: поскольку практически невозможно руками протестировать сайт во всех возможных браузерах и операционных системах, на помощь приходят инструменты кроссбраузерного тестирования! Вы можете использовать Browsershots, BrowserStack, Cross Browser Testing и подобные сервисы для тестирования.

Отзывчивый макет

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

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

  • Отдавайте приоритет важному контенту и скрывайте маловажные детали на малых экранах. Я считаю, что важнее всего показывать самое важное на небольших экранах. Иногда удалить часть контента на мобильных невозможно, тогда стоит предусмотреть возможность его скрытия.
  • Используйте SVG. В отличие от традиционных изображений, вроде PNG или JPEG, SVG легко масштабируется без потери качества. Кроме того, часто они меньше размером, так что вы немного повысите скорость загрузки сайта.
  • Когда дело доходит до взаимодействия с пользователем, фокусируйтесь на том, чтобы предоставлять достаточно большие контролы (поля вводы, кнопки, переключатели).
  • Для смартфонов по возможности делайте кнопки не меньше 44px, как это рекомендуется в iOS Human Guidelines
  • Протестируйте дизайн на минимум пяти пользователях, используя их привычные устройства.
  • Используйте фреймворки типа Bootstrap. С ними создание пригодного для мобильных устройств сайта становится намного проще. Использование готовых классов из Bootstrap поможет вам определиться с сеткой и размещением контента.

Сделайте красный более синим

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

  • Создание анимированных прототипов — хороший вариант показать ваши идеи. Используйте программы вроде Adobe XD, Sketch, InVision и так далее. Начинайте разработку только после согласования дизайна.
  • Будет разумно с самого начала спланировать весь процесс разработки. Вероятнее всего, в процессе придется добавить время на разные неожиданности. Помните закон Мерфи: «Что может пойти не так — пойдет не так».
  • Сохраняйте спокойствие. Не позволяйте эмоциям взять над собой верх. Просто помните, что клиент не заканчивал художественную школу, и может не понимать, что красный текст на зеленом фоне не улучшает читаемость. Объясняйте свои решения касательно визуальной иерархии, типографики и всего, что могут затронуть изменения.
  • Помните, что сайт — для вашего клиента, а ваша цель — сделать клиента довольным сайтом. Лучшее, что вы можете сделать — дать свои рекомендации касательно изменений. Если вы не согласны, просто сделайте все, что можно, чтобы сайт выглядел максимально хорошо.

CSS недооценен

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

Я работала с несколькими изумительными бэкенд-инженерами, которые знали каждый паттерн ООП в книге, но намертво застревали с позиционированием и float, и считали отзывчивый CSS чем-то вроде черной магии. Так что я нахожу этот комикс очень точным.

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

Как я говорила в своей предыдущей статье «Troubleshooting CSS», работа с CSS и получение хороших результатов от работы с CSS — две большие разницы. С CSS легко начать, но мастерство потребует усилий. Это то, что требует минуту на знакомство и всю жизнь (с преувеличением) на мастерство.

18 советов по CSS, которые сделают жизнь разработчика проще

4’569 подписчиков
1’279 просмотров на пост

Авторский канал по фронтенду: полезные ссылки, подборка книг, публикация собственных видео. Вся годнота в одном месте!

Админ: @annblok
Обсуждение по вопросам рекламы: @Nipi_bz

Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak

Детальная рекламная статистика будет доступна после прохождения простой процедуры регистрации

  • Детальная аналитика 70’046 каналов
  • Доступ к 28’004’146 рекламных постов
  • Поиск по 112’332’059 постам
  • Отдача с каждой купленной рекламы
  • Графики динамики изменения показателей канала
  • Где и как размещался канал
  • Детальная статистика по подпискам и отпискам

Найдено 1087 постов

22 июля стартует новый интенсив «Wordpress Мастер» ��
Дарим огненные скидки самым быстрым в течении суток!

✅ Что будет на интенсиве?

Мы предоставим свёртанные странички сайта (главная, страница блога и страница поста) и перенесем это все на WordPress таким образом, чтобы ты научился управлять функциями не только через конструктор, но и мог самостоятельно написать сам функции на PHP.

Посмотреть верстку можно тут — http://tpverstak.ru/live/wordpress/

✅ Кому подойдёт интенсив?

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

— Тем, кто готов получить ответы, о том, как переносится готовая верстка на CMS WordPress, создавая полноценный блог и главную страницу для сайта, а не просто лендинг без функций.

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

✅ Как можно зарабатывать, зная WordPress?

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

— Устроиться в веб-студию
В веб-студиях довольно часто используют готовые CMS. Самая популярная из них — это WordPress. Ваше преимущество после прохождения интенсива: знание PHP.

— Искать заказчиков на фрилансе
Спрос на установку, перенос вёрстки и редизайн сайтов WordPress по-прежнему высок. Можешь проверить это сам на популярных сайтах Upwork и FL.ru

�� Если ты готов пройти этот огненный 12-тидневный интенсив, то самым быстрым мы дарим скидку:
— ТАРИФ «САМОСТОЯТЕЛЬНЫЙ» за 2500 руб (вместо 4500 руб)
— ТАРИФ «ПОЛНЫЙ КОМПЛЕКТ» за 6000 руб (вместо 8000 руб)

Читать подробнее и оплатить — http://tpverstak.ru/wordpress-master/

Скидка действует до 15 июля 22:00 по мск

​​Метаморфоза тестирования redux-saga ��

Фреймворк redux-saga предоставляет кучу интересных паттернов для работы с сайд-эффектами, но, как истинные кроваво-энтерпрайзные разработчики, мы должны покрывать весь свой код тестами. Давайте разберёмся, как мы будем тестировать наши саги.

​​CSS Style Guides ��

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

​​Коллекции JavaScript – Set, Map, WeakMap и WeakSet ��

В этой статье автор познакомит с новыми коллекциями в JavaScript: Set, Map, WeakMap, WeakSet.
Все они были введены в спецификацию JavaScript с ES2015, также известным как ES6.
И все они являются итеративными типами. Так же, как String и Array. Это означает, что мы можем использовать for… of для итерации по этим коллекциям и получения доступа к каждому из их элементов.

​​HTML can do that? ��

Подборка демок, демонстрирующая возможности «чистого» HTML

15 лучших приемов CSS, чтобы сделать вашу жизнь легче

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

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

3 основных типа таблиц стилей CSS

Встроенный (Inline) — код вписывается в тег документа и оказывает влияние только на него.

Внедренны й (Embedded) — код «внедрен» в заголовок документа. Он влияет только на страницу, в которую «внедрен».

Внешний (External) — таблицы стилей создаются в отдельном документе. Затем они связываются с другими веб документами и оказывают влияние на любой связанный с ними документ.

Существуют 15 лучших приемов работы с CSS.

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

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

Избегайте встроенных CSS

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

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

Разделяйте контент от дизайна

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

Дата, заголовок и подпись

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

Сохраняйте библиотеку шаблонов

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

Используйте сокращения CSS

Для быстрой загрузки таблицы стилей и сохранения времени используйте сокращения при кодировании CSS. Этот хороший прием кодирования CSS сделает таблицу стилей аккуратной и понятной.

Вам следует написать это:

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

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

Используйте дефис вместо подчеркивания

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

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

Более эффективно, чем это:

Избегайте использования действительно больших изображений

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

Избавляйтесь от излишеств кода

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

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

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

Используйте функцию Reset CSS

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

Пишите сначала для Gecko, а потом настраивайте для IE и Webkit

Обычно, если CSS правильно работает для Gecko браузеров (Netscape, Firefox Mozilla, Camino, Flock), весьма вероятно, что он будет нормально работать с другими браузерами — IE and Webkit (Safari, Chrome). Для экономии времени и нервов при попытках выяснения ошибок в кодировании, лучше начинать с написания CSS для Gecko браузеров.

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

В использовании CSS есть много преимуществ. Он не только позволяет сделать страницы быстро загружаемыми, но и при использовании приведенных выше 15 лучших приемов CSS делает легче не только вашу жизнь, но и проектирование и редактирование тем и шаблонов. Применение CSS дает преимущества при работе с Google. Поисковик придает больший вес контенту, находящемуся в верхней части HTML-документа. Когда «пауки» поисковых систем сканируют HTML веб-сайта, они просматривают контент, идущий первым. Используя CSS, легко создать схему, где первым появляется контент, а затем следует остальной исходный код страниц.

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

Данная статья является переводом 15 Best CSS Practices to Make Your Life Easier подготовленная командой проекта «Сайтостроение от А до Я».

10 способов протестировать свои навыки в HTML и CSS

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

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

1. Запустить проект

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

2. Участвуйте в битве

Лучший способ проверить свои навыки программирования в HTML и CSS – принять участие в настоящей битве кодеров. Это можно сделать в сообществе CodeWars. В дополнение к битвам с другими специалистами, это больше похоже на игру. Это позволяет сделать полученный опыт еще более интересным для тех, кто принимает участие в битве. Однако, стоит отметить, что этот тип тестирования больше подойдет тем, кто уже приобрел больше опыта в этой сфере и может конкурировать с другими.

3. Присоединитесь к сообществу

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

4. Программный симулятор

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

5. Наблюдайте за скринкастами

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

6. Головоломки и викторины

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

7. Играйте в игры

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

8. Найдите сайт с тестами

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

9. Дисциплинируйте себя

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

10. Общайтесь со специалистами со всего мира

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

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

10 способов протестировать свои навыки в HTML и CSS

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

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

1. Запустить проект

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

2. Участвуйте в битве

Лучший способ проверить свои навыки программирования в HTML и CSS – принять участие в настоящей битве кодеров. Это можно сделать в сообществе CodeWars. В дополнение к битвам с другими специалистами, это больше похоже на игру. Это позволяет сделать полученный опыт еще более интересным для тех, кто принимает участие в битве. Однако, стоит отметить, что этот тип тестирования больше подойдет тем, кто уже приобрел больше опыта в этой сфере и может конкурировать с другими.

3. Присоединитесь к сообществу

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

4. Программный симулятор

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

5. Наблюдайте за скринкастами

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

6. Головоломки и викторины

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

7. Играйте в игры

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

8. Найдите сайт с тестами

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

9. Дисциплинируйте себя

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

10. Общайтесь со специалистами со всего мира

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

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

Пять наиболее раздражающих аспектов CSS

CSS кажется простым и понятным, пока вам не приходится делать что-то нестандартное. Вот еще один взгляд на проблемы CSS. Это перевод статьи «5 Most Annoying Things with CSS».


В 1996 основные браузеры поддерживали CSS лишь частично, и из-за этого веб-дизайнеры были вынуждены придумывать кучу хаков и обходных путей, чтобы их стили работали так, как они хотели. Фактически только с 1999 года каждый браузер наконец стал поддерживать CSS1 полностью. IE 5.0 для Макинтош, выпущенный в марте 2000 года, стал первым браузером, достигшим полной поддержки спецификации CSS1. CSS2 был выпущен в 1999 году, но дизайнеры не решались использовать его повсеместно из-за неполной поддержки стандарта браузерами.

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

К счастью, кроме усилий W3C по улучшению спецификации в соответствии с требованиями разработчиков, сообщество само разработало множество решений для улучшения и упрощения работы с CSS в сложной среде. SASS, Stylus, LESS ввели в обиход циклы, примеси и функции. Внедрение переменных CSS упростило написание сложных стилей, улучшило читаемость и упростило поддержку.

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

Даже сегодня, называя себя «fullstack разработчиком» или «front-end разработчиком», с опытом работы в год или восемь лет, вы все равно столкнетесь с ситуацией, когда CSS заставит вас попотеть.

Я перечислю некоторые крупные проблемы CSS:

CSS ориентирован на разметку, не на дизайн

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

Браузерные войны

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

  • Всегда используйте Normalize.css. Он заставляет браузеры отрисовывать все элементы более предсказуемо и в соответствии с современными стандартами. Он точно затрагивает только элементы, которые нуждаются в нормализации.
  • Вы можете использовать фреймворки типа Bootstrap, Bulma и Materialize. По большей части они хорошо совместимы с большинством браузеров.
  • Используйте генераторы кода CSS3. Они помогают разработчикам писать кроссбраузерные участки кода для разных свойств CSS3. Они дают разработчикам широкие возможности кастомизации, включая border-radius, text-shadow, RGBa, box sizing. Один из сервисов — CSS3 Generator.
  • Валидация: сервис валидации W3C валидирует разные версии XHTML и HTML, выводя кучу важных ошибок и сообщений, чтобы помочь разработчикам создавать отличные сайты. W3C Validator: http://validator.w3.org
  • W3C Css Validator: http://jigsaw.w3.org/css-validator
  • Тестирование: поскольку практически невозможно руками протестировать сайт во всех возможных браузерах и операционных системах, на помощь приходят инструменты кроссбраузерного тестирования! Вы можете использовать Browsershots, BrowserStack, Cross Browser Testing и подобные сервисы для тестирования.

Отзывчивый макет

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

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

  • Отдавайте приоритет важному контенту и скрывайте маловажные детали на малых экранах. Я считаю, что важнее всего показывать самое важное на небольших экранах. Иногда удалить часть контента на мобильных невозможно, тогда стоит предусмотреть возможность его скрытия.
  • Используйте SVG. В отличие от традиционных изображений, вроде PNG или JPEG, SVG легко масштабируется без потери качества. Кроме того, часто они меньше размером, так что вы немного повысите скорость загрузки сайта.
  • Когда дело доходит до взаимодействия с пользователем, фокусируйтесь на том, чтобы предоставлять достаточно большие контролы (поля вводы, кнопки, переключатели).
  • Для смартфонов по возможности делайте кнопки не меньше 44px, как это рекомендуется в iOS Human Guidelines
  • Протестируйте дизайн на минимум пяти пользователях, используя их привычные устройства.
  • Используйте фреймворки типа Bootstrap. С ними создание пригодного для мобильных устройств сайта становится намного проще. Использование готовых классов из Bootstrap поможет вам определиться с сеткой и размещением контента.

Сделайте красный более синим

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

  • Создание анимированных прототипов — хороший вариант показать ваши идеи. Используйте программы вроде Adobe XD, Sketch, InVision и так далее. Начинайте разработку только после согласования дизайна.
  • Будет разумно с самого начала спланировать весь процесс разработки. Вероятнее всего, в процессе придется добавить время на разные неожиданности. Помните закон Мерфи: «Что может пойти не так — пойдет не так».
  • Сохраняйте спокойствие. Не позволяйте эмоциям взять над собой верх. Просто помните, что клиент не заканчивал художественную школу, и может не понимать, что красный текст на зеленом фоне не улучшает читаемость. Объясняйте свои решения касательно визуальной иерархии, типографики и всего, что могут затронуть изменения.
  • Помните, что сайт — для вашего клиента, а ваша цель — сделать клиента довольным сайтом. Лучшее, что вы можете сделать — дать свои рекомендации касательно изменений. Если вы не согласны, просто сделайте все, что можно, чтобы сайт выглядел максимально хорошо.

CSS недооценен

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

Я работала с несколькими изумительными бэкенд-инженерами, которые знали каждый паттерн ООП в книге, но намертво застревали с позиционированием и float, и считали отзывчивый CSS чем-то вроде черной магии. Так что я нахожу этот комикс очень точным.

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

Как я говорила в своей предыдущей статье «Troubleshooting CSS», работа с CSS и получение хороших результатов от работы с CSS — две большие разницы. С CSS легко начать, но мастерство потребует усилий. Это то, что требует минуту на знакомство и всю жизнь (с преувеличением) на мастерство.

CSS кажется простым и понятным, пока вам не приходится делать что-то нестандартное. Вот еще один взгляд на проблемы CSS. Это перевод статьи «5 Most Annoying Things with CSS».

В 1996 основные браузеры поддерживали CSS лишь частично, и из-за этого веб-дизайнеры были вынуждены придумывать кучу хаков и обходных путей, чтобы их стили работали так, как они хотели. Фактически только с 1999 года каждый браузер наконец стал поддерживать CSS1 полностью. IE 5.0 для Макинтош, выпущенный в марте 2000 года, стал первым браузером, достигшим полной поддержки спецификации CSS1. CSS2 был выпущен в 1999 году, но дизайнеры не решались использовать его повсеместно из-за неполной поддержки стандарта браузерами.

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

К счастью, кроме усилий W3C по улучшению спецификации в соответствии с требованиями разработчиков, сообщество само разработало множество решений для улучшения и упрощения работы с CSS в сложной среде. SASS, Stylus, LESS ввели в обиход циклы, примеси и функции. Внедрение переменных CSS упростило написание сложных стилей, улучшило читаемость и упростило поддержку.

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

Даже сегодня, называя себя «fullstack разработчиком» или «front-end разработчиком», с опытом работы в год или восемь лет, вы все равно столкнетесь с ситуацией, когда CSS заставит вас попотеть.

Я перечислю некоторые крупные проблемы CSS:

CSS ориентирован на разметку, не на дизайн

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

Браузерные войны

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

  • Всегда используйте Normalize.css. Он заставляет браузеры отрисовывать все элементы более предсказуемо и в соответствии с современными стандартами. Он точно затрагивает только элементы, которые нуждаются в нормализации.
  • Вы можете использовать фреймворки типа Bootstrap, Bulma и Materialize. По большей части они хорошо совместимы с большинством браузеров.
  • Используйте генераторы кода CSS3. Они помогают разработчикам писать кроссбраузерные участки кода для разных свойств CSS3. Они дают разработчикам широкие возможности кастомизации, включая border-radius, text-shadow, RGBa, box sizing. Один из сервисов — CSS3 Generator.
  • Валидация: сервис валидации W3C валидирует разные версии XHTML и HTML, выводя кучу важных ошибок и сообщений, чтобы помочь разработчикам создавать отличные сайты. W3C Validator: http://validator.w3.org
  • W3C Css Validator: http://jigsaw.w3.org/css-validator
  • Тестирование: поскольку практически невозможно руками протестировать сайт во всех возможных браузерах и операционных системах, на помощь приходят инструменты кроссбраузерного тестирования! Вы можете использовать Browsershots, BrowserStack, Cross Browser Testing и подобные сервисы для тестирования.

Отзывчивый макет

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

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

  • Отдавайте приоритет важному контенту и скрывайте маловажные детали на малых экранах. Я считаю, что важнее всего показывать самое важное на небольших экранах. Иногда удалить часть контента на мобильных невозможно, тогда стоит предусмотреть возможность его скрытия.
  • Используйте SVG. В отличие от традиционных изображений, вроде PNG или JPEG, SVG легко масштабируется без потери качества. Кроме того, часто они меньше размером, так что вы немного повысите скорость загрузки сайта.
  • Когда дело доходит до взаимодействия с пользователем, фокусируйтесь на том, чтобы предоставлять достаточно большие контролы (поля вводы, кнопки, переключатели).
  • Для смартфонов по возможности делайте кнопки не меньше 44px, как это рекомендуется в iOS Human Guidelines
  • Протестируйте дизайн на минимум пяти пользователях, используя их привычные устройства.
  • Используйте фреймворки типа Bootstrap. С ними создание пригодного для мобильных устройств сайта становится намного проще. Использование готовых классов из Bootstrap поможет вам определиться с сеткой и размещением контента.

Сделайте красный более синим

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

  • Создание анимированных прототипов — хороший вариант показать ваши идеи. Используйте программы вроде Adobe XD, Sketch, InVision и так далее. Начинайте разработку только после согласования дизайна.
  • Будет разумно с самого начала спланировать весь процесс разработки. Вероятнее всего, в процессе придется добавить время на разные неожиданности. Помните закон Мерфи: «Что может пойти не так — пойдет не так».
  • Сохраняйте спокойствие. Не позволяйте эмоциям взять над собой верх. Просто помните, что клиент не заканчивал художественную школу, и может не понимать, что красный текст на зеленом фоне не улучшает читаемость. Объясняйте свои решения касательно визуальной иерархии, типографики и всего, что могут затронуть изменения.
  • Помните, что сайт — для вашего клиента, а ваша цель — сделать клиента довольным сайтом. Лучшее, что вы можете сделать — дать свои рекомендации касательно изменений. Если вы не согласны, просто сделайте все, что можно, чтобы сайт выглядел максимально хорошо.

CSS недооценен

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

Я работала с несколькими изумительными бэкенд-инженерами, которые знали каждый паттерн ООП в книге, но намертво застревали с позиционированием и float, и считали отзывчивый CSS чем-то вроде черной магии. Так что я нахожу этот комикс очень точным.

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

Как я говорила в своей предыдущей статье «Troubleshooting CSS», работа с CSS и получение хороших результатов от работы с CSS — две большие разницы. С CSS легко начать, но мастерство потребует усилий. Это то, что требует минуту на знакомство и всю жизнь (с преувеличением) на мастерство.

18 советов по CSS, которые сделают жизнь разработчика проще

Авторский канал по фронтенду: полезные ссылки, подборка книг, публикация собственных видео. Вся годнота в одном месте!

Админ: @annblok
Обсуждение по вопросам рекламы: @Nipi_bz

About
Platform

Надёжный и быстрый хостинг для сайта. Диск с размером от 20 до 40 гигабайт. Единый тариф. Возможность изменения объёма ресурсов на работающем сервере. Закажите именно столько ресурсов, сколько нужно проекту сегодня.

Подарок каждому пользователю хостинга — коврик для мышки с 5 летней гарантией!

10 причин не становиться программистом ⛔️

У каждой профессии есть свои минусы, не так ли? Так давайте этим видео попробуем разнести в пух и прах это чудо-направление, в которое многие стремятся попасть.

Всем привет! Хочу последний раз напомнить вам, что 4 ноября стартуют основные курсы и есть основный лайфхак, как получить 30% скидки на обучение.

�� Шаг 1
Приобретаете мини-курс Супер Старт http://tpverstak.ru/super-start по привлекательный цене 149 рублей. Там мы верстаем сайт из Figma.

��Шаг 2.
Попадаете на нашу учебную платформу и вам открывается доступ к курсам, у которых цены указаны со скидкой 30%. Купить их можно будет сразу на платформе.

Также на нашей платформе переодически будут проходить такие скидки, но возможность сделать так будет только сегодня последний день! Поторопись, потому что уже завтра (4 ноября) стартуют основные курсы! ☺️

​​Возможности современного JavaScript, о которых вы могли не знать ��

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

​​Шесть задачек для Front-End разработчика ��

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

Представьте ситуацию: вы занимаетесь поддержкой веб-сервиса, созданного на Django, и тут поступает совершенно новая задача от руководства — натянуть новый дизайн на фронт. Вам нужно декомпозировать готовую HTML/CSS вёрстку в модульные шаблоны для Django.
Такое часто встречается в работе fullstack веб-разработчика на Python.
Звучит сложно? А если учесть, что с такой задачей может столкнуться начинающий веб-разработчик?

Не страшно! В SkillFactory предлагают за 9 месяцев пройти специализацию «Full-stack веб-разработчик на Python» https://clc.to/ytHr-w , обучение на которой поможет с нуля получить все необходимые навыки для успешного старта карьеры в веб-разрабоке.

Специализация включает: HTML/CSS, Javascript, Python, Django, Linux. Git, которые вы закрепляете на тренажерах под присмотром ментора.

​​Поиск работы: избегайте этих ошибок в вашем профиле на GitHub ��

В статье собраны советы о том, как программисту создать интересный GitHub-профиль.

Стикер человека, который хочет снова найти время попробоваться на Upwork, чтобы понять, что изменилось с 2020 года там, а не монтажить видосы днями и ночами на технике, которая похоже уже устала от этого (MacBook Air).

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

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

Но есть и хорошие новости. В этом году я хотела выступить на IT конференции с докладом и спустя некоторой череды разочарований в этом направлении 3 декабря это все таки произойдёт! Все подробности опишу чуть позже. В особенности всем этим оперативно буду делиться инсте https://www.instagram.com/annblok

Кстати, насколько вам было бы интересно, чтобы кроме теории и полезных ссылок, тут был иногда и текст от меня в таком формате? (я за второй вариант)

Правила CSS, которые сделают вашу жизнь проще

31.05.2020 Комментарии к записи Правила CSS, которые сделают вашу жизнь проще отключены 83 Просмотров

От автора: после нескольких лет написания и поддержки нескольких очень больших веб-проектов и множества более мелких, я разработал некоторую эвристики для написания поддерживаемого CSS. Я использовал для именования BEM, SMACSS и CSS Modules, хотя эта статья сама по себе не посвящена именованию. (Я склонен использовать сочетание атомарных классов и именования BEM.) Эта статья о полезных правилах написания CSS, о свойствах и значениях, которые я использую или которых избегаю.

Цвета

Моя больная мозоль — это изобилие цветовых значений в веб-проекте. В большом, долгоживущем проекте, над которым я работал несколько лет назад, было объявлено более 300 уникальных цветов в 40 файлах CSS. Треть из них были оттенками серого. Фирменные цвета повторялись с небольшими различиями оттенков. Многие из этих цветов отличались буквально незаметными значениями, такими как #3426D1 и #3426D2. Решением этой проблемы является использование атомарных классов цвета или переменных (в SCSS или CSS) для принятых корпоративных цветов.

Ограничение количества принятых цветов дает дополнительное преимущество, заключающееся в упрощении проверки соответствия цветов фона и переднего плана рекомендациям WCAG2.0 «Цветовой контраст».

Другая практика, имеющая тенденцию приводить к ошибкам — использование цветов с альфа-каналами, обычно путем объявления цвета с помощью функций rgba() или hsla(). Цвет, созданный таким образом, со значением альфа-канала, отличным от 1, полупрозрачен. Воспринимаемый цвет теперь изменяется в зависимости от фона. Обычно желаемый цвет — это то, как он выглядит на белом фоне, поэтому вместо него можно использовать шестнадцатеричное значение. Некоторые функции препроцессоров, такие как SASS lighten(), генерируют полупрозрачный цвет, поэтому придерживайтесь жестко закодированных значений или переменных.

Типографика

Все свойства, которые влияют или зависят от шрифта, должны быть объявлены один раз в одном месте. Сразу после объявления каких-либо правил @font-face, я добавляю атомарные классы для шрифта, изменяющие font-size (через rem) и включающие line-height, letter-spacing и word-spacing, которые являются подходящими для этой комбинации и размера шрифта. После этого никакие свойства font-* или text-*(за исключением text-overflow) не должны использоваться ни в одном наборе правил.

Объявление этих свойств один раз в сочетании с font-face гарантирует, что текст на сайте всегда выглядит правильно. Корректировка line-height вместо padding или margin создаст ошибки при переносе текста. Корректировка font-weight отдельно от объявления шрифта создает риск создания искусственного шрифта. Изменение font-style шрифта, который это не поддерживает, создает искусственный наклон.

И, наконец, избегайте установки размеров шрифта в чем-либо, кроме rem. Использование em вызывает проблемы при вложении элементов, поскольку em является скалярной кратной единицей для текущего font-size. Использование px (или любых других «фиксированных» единиц) увеличивает риск создать текст, который трудно прочитать и который невозможно будет настроить пользователем. Разрешить пользователю (или браузеру пользователя) устанавливать такое значение font-size, которое они считают правильным, возможно не объявляя font-size для элементов body или html, и только с помощью rem.

Отступы

На сайте, ориентированном на контент отступы должны дополнять дизайн. Любое статическое измерение padding: 4px выглядит неправильным при некоторых размерах шрифта. Динамическое измерение, реагирующее на размеры шрифта, например padding: .5em, выглядит правильно при любом размере шрифта. Используйте em для свойств отступов.

Сетка

CSS Grid очень хорошо поддерживается (вплоть до IE10!) и позволяет организовать контент в двух измерений без дополнительных элементов контейнера — как элементы сетки Bootstrap row или col. Дизайнеры часто работают в сетках из 12 столбцов, а CSS-фреймворки, как правило, следуют этому правилу, но сетки, как и отступы, должны дополнять дизайн, а не ограничивать его. Сетки должны описываться в произвольном порядке, а не в заранее определенном формате без контекста. Не раздувайте CSS «фреймворками сеток».

Выравнивание текста

text-align часто используется для выравнивания чего-либо, кроме текста. Это не неверный подход. Используйте для такого типа выравнивания flexbox. Используя значений left и right не всегда работает для языков с написанием справа налево или вертикально (некоторые браузеры соотносят их со значениями потока start и end, но не все). Использование значения justify в тексте может вызвать проблемы в некоторых языках с орграфами, а также может вызвать проблемы у людей с дислексией. Каждый вариант использования text-align лучше решается с помощью flexbox, поэтому вместо этого используйте его. Всегда.

Обводка

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

Фокус и наведение

Как было сказано выше, остерегайтесь изменения стиля :focus, потому что он работает как индикатор того, какой элемент в настоящее время выделен фокусом ввода. Добавление стилей для :hover часто привносит красивые штрихи, но не используйте этот псевдо-селектор для отображения дополнительного текста, если вы не делаете то же самое для :focus (и, конечно, если элемент является фокусируемым). Как правило, но не всегда, уместно использовать как :hover, так и :focus для того же набора правил. (Добавление селектора :focus в стили наведения для кнопки может привести к тому, что нажатая кнопка будет выглядеть «застрявшей».)

Непрозрачность

Добавление значения 0 для opacity элемента на самом деле не скрывает его от инструментов доступности. Элемент все еще занимает место в потоке документа, и его текст все еще читается программами чтения с экрана. Единственные два варианта использования, для которых целесообразно использование свойства opacity — это при вводе элемента в представление (быстрый переход от 0 к 1) и при стилизации модельного диалогового окна (таким образом, содержимое под ним частично просматривается через фон). Остерегайтесь «стекированных» полупрозрачных наложений. Уровень непрозрачности является мультипликативным, поэтому содержимое ниже двух наложений, каждое из которых отображается с opacity: 50%, приведет к тому, что нижнее будет отображаться так, как будто для него задано opacity: 25%.

Селекторы

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

Производительность селектора в современных браузерах — незначительная проблема, поэтому, несмотря на то, что вы, возможно, слышали о том, что универсальный селектор (*) не работает, у меня на практике возникает проблема связанная с тем, что он слишком общий для почти каждого варианта использования. Использование селектора наподобие .my-class > * в конечном итоге приведет к выпаданию какого-либо дочернего элемента, поэтому вы можете просто добавить классы к элементам, которые хотите стилизовать, и выбрать их напрямую.

В силу аналогичных соображений можно не использовать селекторы типа, такие как div, main. Они имеют тенденцию соответствовать слишком большому количеству элементов и обычно требуют большего количества деталей, чтобы быть полезными, например div.some-class. Подобные составные селекторы имеют более высокую специфичность, чем одиночные селекторы классов, что связано с проблемами, рассмотренными ниже.

Придерживайтесь селекторов классов (.class), атрибутов ([attribute]) и псевдо-классов (:focus). Все они имеют одинаковый уровень специфичности.

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

На противоположном конце спектра от селекторов, являющихся слишком общими (как, например, *), находятся селекторы являющиеся слишком специфичными. Оба случая вызывают проблемы. Слишком специфичный селектор порождает еще более специфичные селекторы или страшные объявления !important. Каждый последующий селектор становится новым препятствием, которое нужно преодолеть при внесении изменений в стили, и следование по этому пути ведет к постоянно раздувающимся нестабильным таблицам стилей, с которыми мы все боимся работать.

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

В этом примере каждый последующий селектор класса более специфичен, чем его предшественник, что устраняет необходимость объявлять набор правил для .btn.btn—primary или .btn.btn—primary—light.

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

Text-transform

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

Z-index

Если какое-либо правило z-index включено в таблицу стилей, в конечном итоге появятся два других правила, которые объявляют z-index: 9999; и z-index: 99999;. Попытка использовать атомарные классы или переменные для ограничения числа допустимых z-индексов не только помешает разработчикам использовать calc() и математические вычисления SCSS для изменения значения для их варианта использования, но и полностью нивелирует цель из-за того, как работают контексты стека.

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

Псевдо-элементы

Использование псевдо-элементов ::before и ::after не только полезно, но часто еще и весело! Многие приемы стилизации основаны на использовании этих двух псевдо-элементов, и, когда в них нет текста (через их свойство content), они считаются семантическими. Проблема с размещением текста в этих элементах заключается в том, что то, читаются они или нет устройствами доступности, зависит от конкретных браузеров и конкретных устройств. Лучше не иметь дело с этим несоответствием, избегая размещения в них текста.

Псевдо-элементы ::first-letter и ::first-line не работают так, как вы, вероятно, думаете. Они предназначены только для первой буквы / строки в элементе уровня блока. Существуют также проблемы с селектором ::first-line, неправильно выбирающим двухбайтовые символы (такие как японская кана) и орграфы.

Манипулирование стилями выделенного текста или текста-заполнителя с помощью ::selection и ::placeholder, соответственно, часто приводит к проблемам. Для ::placeholder решение просто: вы не должны использовать заполнители. Это особенно актуально для важных вещей, например, для меток полей или подсказок. Включая стили ::placeholder, вы поощряете разработчиков, дизайнеров и авторов использовать их, к большому разочарованию ваших пользователей.

Изменение стилей выделения, обычно color и background-color, приводит к более тонким, но существенным ошибкам. Несмотря на то, что цвета выбора по умолчанию не согласованы в разных браузерах и устройствах, и они не всегда обеспечивают приемлемый контраст с цветом текста вашего сайта, пользователи иногда перезаписывают их по причинам доступности. Изменение цветов в этом случае может либо не сработать (из-за того, что пользовательские привилегии доступа CSS превосходят ваши), либо может привести к конфликтам с их таблицам стилей (если вы используете !important). Использование этого псевдо-элемента, чтобы гарантировать доступную контрастность, может привести к нарушению работы для тех людей, которым вы хотите помочь.

(Хотя я уже не помню все подробности, несколько лет назад я столкнулся с проблемой, когда автоматически переведенный в Chrome текст стал невидимым, потому что он опирался на стили ::selection, которые я изменил.)

Переходы и анимация

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

Меньше движения

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

Расширение сброса

Мой переход к CSS — это модифицированная форма сброса Мейерса. Однако есть несколько правил, которые я удаляю из сброса. Я не люблю удалять значки элементов списков ol и ul. Я считаю, что это побуждает разработчиков использовать эти элементы несемантическим образом, таким как группировка элементов, которые являются близкими физически, но не онтологически. Я также удаляю правило, задающее line-height: 1для body. Установка атрибутов, которые влияют на шрифт или зависит от него, отдельно от установки шрифта, является ошибкой.

Некоторые дополнения к файлу сброса приведены ниже. Я не люблю включать в свой CSS атомарный класс .hidden, потому что есть лучший вариант, который будет работать, даже если CSS не загружается — атрибут hidden. Поведение браузера по умолчанию при установке display: none для скрытых элементов может быть перезаписано даже случайно, поэтому я включаю правило для его принудительного применения.

Еще одна вещь, которую я часто нахожу необходимой — это класс visually-hidden. Хотя я чаще использую aria-label для невидимого текста, доступного для чтения с экрана, я обычно также включаю следующее правило:

Именование BEM

Я не могу закончить эту статью без упоминания о соглашениях об именах. Мне нравится именование BEM, потому что оно хорошо читаемо. говорит мне, что это за кнопка. Единственное, в чем я отхожу от официальной методологии BEM, это то, что мне нравится использовать один класс для элемента (за исключением атомарных классов). — это оскорбляет мою чувствительность, потому что второй класс уже говорит мне, что стили выходят из базового набора правил btn. Это также создает две причины для изменения строки.

В моем CSS это выглядит так:

В SCSS вы можете добиться того же эффекта, используя @extend.

Заключение

Это были мои практические правила, которые в течение нескольких лет помогают мне поддерживать большие базы кода со многими участниками. Они не идеальны, и я всегда корректирую их (prefers-reduced-motion является новым), но я надеюсь, что это может помочь другим разработчикам.

Редакция: Команда webformyself.

Хорошие и плохие CSS-практики для начинающих

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

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

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

Плохие CSS-практики

Много раз использовать одно и то же правило

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

Примечание переводчика: спорный вопрос. Не стоит налегать на классы. Не заражайтесь классянкой .

Например, вместо того чтобы повторять правило color: blue для каждого тега и ID:

Используйте для этих целей класс:

Использовать одинаковый >Когда пишете CSS, присваивайте ID только одному элементу в HTML. Для нескольких элементов используйте атрибут класса.

Прим. переводчика: Проще говоря ID должен быть уникальным.

Вы должны написать:

Когда уместно правило !important

Правило !important было создано во второй половине 90-х чтобы помочь веб-дизайнерам и разработчикам переопределять существующие стили. !important преобладает над всеми предыдущими стилями как бы говорит браузеру: “Я главнее, забудь обо всем другом CSS и используй меня!”. Используя его от собственной лени, вы рискуете заработать головную боль позже. Ваш код будет труднее поддерживать.

В представленном выше примере тексту в header назначен красный цвет. Исключением будет header с классом intro и с >специфичности селектора.

Если вы используете !important, то добавляйте его на уровне свойства, а не на уровне селектора. Это означает что свойство color имеет более высокий приоритет, чем размер шрифта. Свойство color более важное чем тот же color в правиле header#capture.

Рекомендация: Вы должны использовать правило !important только тогда, когда исправляете код сторонних разработчиков или инлайновые стили.

Частое использование правила !important является плохой практикой поскольку вносит беспорядок в один из основных механизмов CSS — специфичность (на русском, но лучше на английском).

Использование неэффективных CSS-селекторов

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

Этого можно избежать, если не использовать ID в селекторе, поскольку он имеет высокую специфичность.

Например посмотрите на эти длинные селекторы:

Мы можем укоротить их до двух или трех уровней глубины:

Использовать тонны веб-шрифтов

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

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

Оптимизация шрифта и способ его загрузки могут влиять на размеры страницы и время отрисовки текста.

Рекомендуется использовать один или два (точно не больше трех) веб-шрифтов на вашем сайте и пользоваться значениями по умолчанию браузеров для оптимизации вашего сайта.

Использование встроенных (инлайн) стилей

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

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

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

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

Хорошие CSS-практики

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

Используйте в CSS структуру контента

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

За основу можете взять указанный ниже код:

Сделайте CSS “читабельным”

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

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

2. Стандартный вид

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

Отделите стили jQuery-плагинов

Если вы используете плагины jQuery, то вам стоит поместить стили для них в отдельный css-файл и назвать его легким и запоминающимся именем, например, JS-plugin.css. Это поможет вам поддерживать порядок среди вашего CSS, и вы вспомните добрым словом этот совет, когда вам потребуется изменить или добавить стили для плагинов.

Файл сброса стилей

Файл сброса стилей (или “Reset CSS”) представляет из себя краткий набор правил CSS, который сбрасывает основные стили html-разметки. Использование файла сброса уменьшает разницу отображения в разных браузерах и позволяет получить общий внешний вид.

MeyerWeb самый популярный и широко используемый файл сброса стилей, хотя наряду с ним популярен и normalize.css от Nicolas Gallagher. Это современные файл сброса, полностью соответствующие HTML5. Вы можете подключить отдельный файл со сбросом стилей на вашу страницу или скопировать всю таблицу в файл с вашими стилями.

CSS3 анимация в последнюю очередь

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

Комбинируйте элементы

Если несколько элементов в таблице имеют одинаковые правила стилей, то вы легко можете объединить их, а не переписывать код снова и снова.

Например, h1, h2 и h3 элементы имеют одинаковое правило font-family и цвет текста.

Используйте краткие записи свойств

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

Например, вместо того чтобы использовать margin-top, margin-bottom, margin-left и margin-right вы можете просто использовать одну строку.

Всегда комментируйте

Один из лучших методов написания CSS — размещение комментариев для каждой группы элементов. Это облегчит вам поиск и навигацию по файлу.

Вендорные префиксы

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

Цель вендорных префиксов — избежать неверного исполнения кода.

В CSS следующие префиксы:

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

Посмотрите на код ниже.

Примечание переводчика: Для автоматической расстановки префиксов у нужных свойств воспользуйтесь Autoprefixer-online .

Сжатие CSS

Другой способ написания эффективного CSS — это уменьшение размера файла с использованием таких инструментов, как CSS compressor или Minify CSS. Помогите браузерам сократить время загрузки. Эти инструменты удалят пробелы, переносы строк, а так же повторяющиеся стили.

Чаще используйте HEX-цвета

Есть несколько мнений и аргументаций в интернете, когда речь заходит о выборе между HEX-цветами и цветами по их названию. Различные браузеры могут быть не в состоянии определить, что значат некоторые названия цветов. Значения HEX имеет палитру цветов, содержащую 16 777 216 оттенков, в то время как HTML и CSS имеет в своем арсенале всего 140. Там нет названий для всех 16 миллионов 24-разрядных цветов, поэтому HEX — лучший выбор, когда вы определяетесь с цветовыми вариациями.

Ознакомьтесь со спецификацией CSS Color Module Level 3 для получения дополнительной информации.

Валидация

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

Что дальше?

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

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

Что думаете? Какие плохие или хорошие практики вызывают у вас вопросы? Пожалуйста, оставляйте комментарии.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Мастер Йода рекомендует:  Алгоритмы и структуры данных для начинающих динамический массив
Добавить комментарий