16 советов по продвинутой верстке с языком SCSS


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

7 полезных советов по написанию хорошего кода CSS

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

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

1. Начинайте с CSS Reset

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

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

2. Комментарии – ваши лучшие друзья

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

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

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

3. Делайте отступы в ваших правилах CSS для лучшего поиска

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

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

4. Одно правило – одна строка… Несколько правил – несколько строк

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

5. Изучите (и используйте) сокращённый код

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

Написание этого кода в сокращённом формате делает его гораздо яснее. Сокращённый код использует направление по часовой стрелке, поэтому числа из примера ниже относятся соответственно к top, right, bottom, left .

6. Пишите код CSS в алфавитном порядке, для упрощения чтения

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

Посмотрите на код ниже и заметьте, что первые буквы правил идут в алфавитном порядке, что позволяет вам быстро пробежаться по списку и найти нужную строку. Ищете правило font-size ? Ну, вы знаете, на каком месте в алфавите буква F, поэтому поиск этой строки будет гораздо проще.

7. Используйте понятные имена классов и ID

Нет ничего хуже, чем редактировать кусок кода, когда он выглядит как-нибудь так:

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

Данная публикация представляет собой перевод статьи « 7 Good Tips for Writing Better CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

Развёрнутое руководство по Sass/SCSS

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.

Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.

Содержание статьи

Зачем использовать Sass/SCSS вместо CSS?

  1. Вложенность — SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
  2. Переменные — в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
  3. Улучшенные математические операции— можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
  4. Тригонометрия — SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
  5. Директивы @for , @while и выражение @if-else — можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь — в итоге на выходе будет обычный CSS.
  6. Миксины (примеси) — можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
  7. Функции можно создавать определения CSS в виде функций для многократного использования.

Препроцессор Sass

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

Синтаксис

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

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS — (.sass) Syntactically Awesome Style Sheets.

XYZ school, Москва, до 250 000 ₽

SCSS — (.scss) Sassy Cascading Style Sheets.

Расширения .sass и .scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

Sass — первая спецификация для SCSS с расширением файла .sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением .scss .

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

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире ( — ), а в препроцессорах знаком доллара ( $ ).

Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку !default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила

Стандартные вложенные CSS-элементы с использованием пробела:

Те же вложенные элементы с помощью SCSS:

Как видно, синтаксис выглядит более чистым и менее повторяющимся.

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

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд

В SCSS используется директива & .

С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.

Результат компиляции Sass (из предыдущего примера) в CSS ниже.

В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).

Миксины (они же примеси)

Миксины объявляются директивой @mixin . После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина. Например, можно определить миксин flexible() , который далее будет включён, например, в класс .centered-elements следующим образом:

Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов( -webkit- или -moz- ).

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

Арифметические операции

Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).

Сложение и вычитание

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

Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел ( 5*6 == 5 * 6 ).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .

Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

Есть три помощника, которые намекнут на возможность деления:

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

Результат компиляции в CSS:

Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .


Ниже показано, как работают директивы @if и @else , вложенные в миксин.

Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .

После компиляции в CSS:

Логические операторы

Описание логических операторов

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

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

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

Пример ниже демонстрирует, как делать не надо.

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

Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:

Пример сложения нескольких строк:

Сложение строк и чисел:

Обратите внимание Свойство content работает только с псевдоселекторами :before и :after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции ( fucntion() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if() — это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

@if — это директива, использующаяся для разветвления на основе условия.

Ниже показано комбо-разветвление с добавлением директивы @else .

Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .

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

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива @for итерируется 5 раз.

Результат компиляции в CSS:

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .

Результат компиляции в CSS:

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px() , возвращающую 300px.

После применения класса .name ширина элемента будет равна 300 пикселям.

Результат в браузере:

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

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

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

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

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

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow() :

Использование функции rad() :

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() .

Заключение

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

10 важных советов от CSS мастеров

Дата публикации: 2010-04-04

От Автора: Касаемо CSS в Сети полно ресурсов и мнимых “полезных советов экспертов”. Они от непроверенных, самопровозглашенных “гуру”, не признанных в мире веб-дизайна. Так как они могут быть похожими на правду, то откуда нам узнать, что совет по CSS – это надежный источник или непроверенное, на «скорую руку» слепленное решение?

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

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

1. Ваш CSS должен быть простым – Peter-Paul Koch (Питер-Поль Кох)

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

Питер-Поль Кох – крестный отец веб-разработки. Так как он является разработчиком старой школы и основная масса образцов в его портфолио пришлась на 1998-2002гг., он работал с такими тяжеловесами, как Apple. Он написал книгу по javascript, но даже и секунды не думайте, что ему нечего сказать о CSS.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Опасность CSS хаков.

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

Мастер Йода рекомендует:  5 песен для программистов

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

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

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

Питер-Поль сделал ударение на том, что кажется верным не только для CSS, но и для веб-разработки в целом. Простота – это ключ к эффективному кодированию.

2. Выполняйте CSS-объявления в одной строке – Jonathan Snook (Джонатан Снук)

Джонатан Снук – невероятно популярный разработчик из г. Оттава (Ottawa) в Канаде, сделавший себе имя в сетевых стандартах и дизайне. Он выступал на престижных конференциях типа SXSW и опубликовал несколько технических ресурсов по дизайну на Sitepoint.

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

Разбиение на части может выглядеть более привлекательным, но, конечно, не помогает ничего найти. При поиске чего-либо в таблице стилей самое главное – это массив правил (т.е. часть перед < and >). Я ищу элемент, id или класс. Расположение всего в одной строке делает просмотр документа намного более быстрым просто оттого, что вы больше видите на одной странице. Когда я нашел массив правил, который искал, найти нужное мне свойство обычно уже несложно, так как их редко бывает слишком много.

Джонатан продолжает свою мысль, давая пример объявлений одной строкой, которая выглядит так:

Хорошо

Плохо

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

3. Используйте сокращения CSS – Roger Johansson (Роджер Йоханссон)

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

Роджер Йоханссон знает кое-что о разработке Сети. Шведский веб-дизайнер работает с Интернетом с 1994 и имеет популярный блог о веб-дизайне. Если речь идет о простых и элегантных решениях, то Роджер — один из самых хорошо осведомленных людей в этой области.

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

Использование сокращенной записи для свойств может сэкономить много места. Например, чтобы выставить разные margin для сторон блока, можно использовать это:

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

Но вот это же самое гораздо более эффективно:

margin:1em 0 2em 0.5em;

Тот же самый синтаксис используется и для свойства padding.

Так как скоропись CSS сокращает размеры таблицы стилей, она также помогают организовать и поддержать код несложным. Красивый CSS – это простой CSS.

4. Дайте возможность блочным элементам естественным путем заполнить пространство – Jonathan Snook (Джонатан Снук).

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

Мое практическое правило заключается в следующем: если я устанавливаю ширину, я не определяю margin или padding. Таким же образом, если я устанавливаю margin или padding, я не определяю ширину. Работать с блочной моделью иногда такое мучение, особенно если вы имеете дело с процентами. По этой причине я устанавливаю ширину контейнеров, а затем margin или padding для элементов внутри них. Обычно это проходит гладко.

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

5. Устанавливайте и сбрасывайте float – Trevor Davis (Тревор Дэвис)

Float, возможно, одна из самых важных вещей, которые нужно понять в CSS, но знать, как сбросить float (clear)– так же необходимо.


Тревор Дэвис, может быть, и не такое великое имя в мире веб-дизайна, как Зельдман (Zeldman) или Снук (Snook), но он, конечно, заслуживает упоминания в связи со своим великолепным портфолио веб-разметок. Его блог – прекрасный ресурс для любого веб-разработчика, желающего избавиться от мусора.

Сбрасывайте float

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

Я создал простую страницу с двумя свободно перемещающимися столбцами рядом. В примере вы заметите, что серый фон не вмещает эти столбцы. И самое простое, что можно придумать – это сделать содержащий элемент также плавающим. Но сейчас вы видите, что фон контейнера не вмещает область контента.

Так как контейнер имеет margin: 0 auto, мы не хотим его делать плавающим, потому что это будет уводить его в сторону, от места, где он должен быть. Так что, другой способ ограничить плавающий объект – это вставить ограничивающий элемент. В этом случае я просто использую пустой div, установленный на clear: both. В настоящее время имеются другие способы очистить плавающий объект без разметки, но я заметил некоторую противоречивость этого приема, так что я просто жертвую пустым div’ом.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

6. Используйте отрицательный margin – Dan Cederholm (Дэн Сидерхолм)

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

Компания Дэна Сидерхолма SimpleBits — это энергичная команда дизайнеров. Дэн работал с:

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

Отрицательные margin

В то время, как может казаться алогичным поставить отрицание впереди любого объявления (как margin-left: -5px), в действительности это довольно хорошая идея. Мистер Сидерхолм объясняет, что использовать отрицательные поля для элементов иногда легче, чем изменить каждый аспект дизайна для выстраивания так, как вам нужно.

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

7. Используйте CSS для центрирования разметки – Dan Cederholm (Дэн Сидерхолм)

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

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

У Дэна есть старый и проверенный метод, который он часто использует для того, чтобы достичь идеального состояния центрированной разметки.

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

8. Используйте правильный DOCTYPE – Jeffrey Zeldman (Джеффри Зельдман)

Вы написали эффективный XHTML и CSS. Вы собираетесь использовать W3C-стандартный Document Object Model (DOM) для управления динамическими элементами страницы. Однако в браузерах, созданных для поддержки тех самых стандартов, ваш сайт падает. Винить в этом, скорее всего, придется неправильный DOCTYPE.

Джеффри Зельдман – один из основателей прекрасного ресурса, сайта A List Apart, учредил и управлял The Web Standards Project, управляет студией дизайна Happy Cog и даже написал книгу по проектированию для веб-стандартов. Короче говоря, Зельдман принадлежит к избранным веб-дизайнерским кругам.

Неверное представление о DOCTYPE

DOCTYPE веб-страницы — один из самых игнорируемых аспектов дизайна. Использование правильного DOCTYPE’а – ключевой момент, и Зельдман объясняет почему.

Использование неполного или устаревшего DOCTYPE’а – или вообще никакого DOCTYPE’а – ставит те самые браузеры в режим “Quirks” (причуды), где браузер предполагает, что вы написали старомодную, неэффективную разметку и код согласно унылым индустриальным нормам поздних 1990-х гг.

Зельдман выделяет важность реального использования DOCTYPE’а и указывает, что вы должны добавить url в объявлении, как здесь:

Если в своих разметках вы находите необъяснимые затруднения, возможно, что проблема в DOCTYPE.

9. Центрируйте отдельные элементы при помощи CSS – Wolfgang Bartelme (Вольфганг Бартельми)

Центрирование элементов — частая задача при создании вебсайтов. Но для новичков в CSS зачастую что-то вроде головоломки, как центрировать, например, весь вебсайт в браузерах помимо IE.

Вольфганг Бартельми – веб-дизайнер в дизайнерской фирме Bartelme design. У Бартельми один из самых элегантных блогов, и он непрерывно создает прекрасные иконки и дизайнерские работы. Он сделал дизайн блоговой платформы Squarespace и популярного софта MacHeist.

Вольфганг создал учебник, который помогает справиться со сложной задачей центрирования элементов при помощи CSS. Центрированные элементы безумно полезны, но иногда сложно добиться нужного дизайна. Учебник Бартельми гарантирует центрированное расположение при помощи выбора правильного DOCTYPE’а и присоединения магии CSS. Код неприхотливый, позволяет выполнить работу и прекрасно сочетается со стремлением к простоте в CSS.

10. Используйте команду text-transform – Trenton Moss (Трентон Мосс)

Трентон Мос разбирается в простоте использования. У него собственная компания по веб-юзабилити, которая обучает простоте использования и веб-написанию. Он также пишет для сайтов вроде Sitepoint. Трентон дает прекрасные полезные советы, основанные на своем опыте работы в качестве эксперта по веб-юзабилити.

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

Одна из наименее известных, но действительно полезных CSS- команд – команда text-transfom. Три самых общих значения этого правила таковы: text-transform: uppercase, text-transform: lowercase и text-transform: capitalize. Первое правило превращает все знаки в заглавные буквы, второе обращает в строчные, а третье делает первую букву каждого слова заглавной.

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

Эта команда невероятно полезна для обеспечения последовательности стиля на всем пространстве вебсайта, особенно если у него несколько контент-редакторов. Скажем, ваш стиль требует, чтобы слова в заголовках всегда начинались с заглавных букв. Чтобы обеспечить это, используйте text-transform: capitalize. Даже если редакторы сайта забудут об этом требовании, их ошибка не отразится на сайте.

Хотя text-transfom– это мелочь, добавляемая в разметку css, она может иметь огромное значение в будущем, когда понадобится сделать изменения.

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

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Цвета

Когда вы используете в проекте огромное количество цветов, сложно не запутаться, так как порой отличия бывают незаметными: возьмите #3426D1 и #3426D2 . Для решения этой проблемы достаточно использовать элементарные классы цветов в CSS или SCSS.

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

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

Типографика

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

XYZ school, Москва, до 250 000 ₽

Объявление данных свойств вместе с font-face гарантирует, что страницы сайта всегда будут выглядеть правильно. Настройка line-height вместо padding или margin может вызвать ошибки при обвёртывании текста. А установка font-weight отдельно от всех остальных свойств (стилей), касающихся шрифта, приведёт к faux bold font. Изменение font-style для шрифта, который не поддерживается, тоже ведёт к неправильному его отображению.

Устанавливайте размер шрифта в rem единицах. Использование em приведёт к проблемам при вложении элементов, так как em является скалярным кратным текущему размеру шрифта. px может создать нечитаемый и неадаптивный контент. Позвольте пользователю (или браузеру пользователя) установить подходщий им размер шрифта — не объявляйте размер шрифта в body или элементе html и используйте только rem .

Интервалы

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

Для интервалов используйте em .

Инструмент CSS Grid Layout

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

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

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

Свойство outline

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

Псевдоклассы :focus и :hover

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

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

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

Селекторы

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

Производительность CSS-селекторов в современных браузерах — вопрос не первой важности, возможно, вы слышали об универсальном селекторе (*). О чём действительно стоит беспокоиться, так это о слишком большом охвате этого селектора. В будущем это может повлечь больше неудобств, чем пользы. Использование селектора вроде .my-class > в конечном счёте потребует от вас выбрать какой-нибудь дочерний класс, так что вам придётся добавлять другие классы и направлять этот селектор на них.
Тот же самый аргумент можно привести в пользу неиспользования type-селекторов ( div , main ), которые скапливаются в больших количествах и требуют добавления некоторых идентифицирующих свойств div.some-class . Вот такие множественные селекторы более специфичны, и вероятность багов меньше.
То же самое с селекторами .class , [attribute] и :focus .

Чрезмерная точность

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

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

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

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

Свойство text-transform

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

Свойство z-index

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

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

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

Иногда с псевдоэлементами ::before и ::after можно поиграться, многие стилистические фичи основаны именно на этих двух псевдоэлементах, и пока они пустые (без контента), всё выглядит вполне сносно. Проблема с размещением контента в этих элементах заключается в том, что не все устройства способны справляться с нагрузкой. Так что не размещайте в них ничего.

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

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

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

transitions и animations в CSS отличаются от opacity и transform тем, что после их выполнения браузер заново перерисовывает всю страницу. На мощном компьютере это никак не заметно, но на простеньких телефонах и ноутбуках всё выглядит криво. Плохая анимация смотрится хуже, чем её отсутствие.

Медиа-запрос prefers-reduced-motion

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

Сброс стилей

Хорошо использовать немного улучшенную версию Meyers reset. Несколько аспектов удалены из reset’а, например списки иконок ol и ul элементов, которые могут привести к тому, что начнут объединяться вещи одинаковые по представлению, но разные по происхождению. Также в этой версии отсутствует установка line-height в body на 1, ведь всё зависит от шрифта и впоследствии могут возникнуть непредвиденные ошибки. В этом reset’е есть вещи, упомянутые выше. В CSS не добавляется атомарный класс .hidden , потому что есть лучшее решение, которое будет работать, даже если CSS не подгрузится, — hidden-атрибут. Обычно на скрытые элементы браузер выставляет display: none , но это тоже можно изменить.

Исходники reset’a — https://github.com/NickGard/css-utils/blob/master/reset.css.
Ещё одна полезная штука — это класс visually-hidden . Вместе с aria-label для невидимого читаемого с экрана текста нужно использовать следующий блок кода:

Наименования в соответствии с методологией BEM

BEM, пожалуй, лучший способ именования элементов, и читается он легко — сразу понятно, к какому типу кнопки относится данный элемент. Маленькое отступление от стиля BEM , но это довольно-таки удобно, сразу видно, что второй класс базируется на первом. При этом CSS выглядит так :

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

Вступление на путь верстальщика


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

Что же такое верстка?

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

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

В итоге получается готовая страница сайта. Сайты верстают, чаще всего с psd макетов, которые предоставляет дизайнер. Макет разбирают в фотошопе. После верстки готовый документ не является завершенным сайтом. Это просто оболочка, причем статичная. Дальше идет обработка с помощью JS, подключение скриптов, работа серверных программистов и еще куча всего.

По сути, если собрался становиться именно верстальщиком, то необходимо не слишком большое количество скиллов.

Однако верстальщики сейчас на рынке не так востребованы. Намного чаще требуются именно фронтендеры. Фронт-енд – клиентская сторона создания сайта. То есть работа на стороне браузера. Если сильно обобщить, то она включает в себя как верстку, так и работу со скриптами.

Есть еще бэкенд. Бэкенд – серверная сторона, отвечает за взаимодействие с сервером, непосредственно работу сайта, оперирование данными от пользователей и т.д. В этой пасте бэкенду почти ничего не посвящено. Материалов у нас очень мало, ткак не то направление. Если кто поделится, будем рады пополнить свои закрома.

Так вот, фронтендер, даже самый начинающий должен знать сильно больше верстальщика. Тут лучше продублирую ОП-пост:

На данный момент фронтендеру новичку нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.

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

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

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

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

Основные направления: фриланс или конторки.

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

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

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

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

МАТЕРИАЛЫ, ПОЛЕЗНЫЕ ССЫЛКИ И СОВЕТЫ ПО ОБУЧЕНИЮ.

Сначала вкратце по процессу обучения: если совсем нихуя не знаешь, то лучше начинай учить именно HTML/CSS. Сверстаешь свой первый макет – учись верстать адаптивно. Почитывай материалы в инете, разные статейки, смотри интересные примеры, практикуйся, спрашивай непонятное в треде, читай литературу представленную здесь и ищи что-то сам. Постепенно придет понимание всех этих процессов, и че это вообще за хуйня. Как почувствуешь уверенность в верстке – перекатывайся на JS (мастхев, если хочешь развиваться). Можешь параллельно прикручивать готовые скрипты к своим сайтикам, смотреть что как работает. Ну а дальше работы не паханое поле. Двигайся, куда тебе захочется.

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

1. Первичные материалы в хаотичном порядке. Они часто дублируют друг друга. Можно проходить что-то одно по одному из направлений. Личные предпочтения выскажу ниже.

http://htmlacademy.ru/ — ультрагоднота, советую начинать изучение HTML/CSS отсюда. У них же есть интенсивы (обучающие видеоуроки, для лучшего понимания предмета, тоже мастхев) ссылки чуть ниже.

http://learn.javascript.ru/ — по JS на русском лютая годнота. Годнее только Флэнаган. Лучше начинать учить язык отсюда, потом уже книги.

http://codeschool.com/ — тут платно, но есть бесплатные курсы, годные вещи про jquery и git

http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.

http://teamtreehouse.com — тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.

Интенсивы от академии:

Базовый интенсив HTMLacademy за 2015 год:

Продвинутый интенсив HTMLacademy за 2015 год:

Лично я бы советовал сначала браться за http://htmlacademy.ru/ . В идеале пройди базовые курсы у них на сайте, затем купи/скачай с торрента интенсивы, пройди их.

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

Затем переходи на продвинутый интенсив. Твоя основная задача там — освоить продвинутые инструменты верстки и адаптивность. Сверстай парочку тамошних тестовых макетов применяя все вышеописанные технологии и приемы.

Дальше можешь выкачивать макеты с простор интернета и верстать уже их. Наращивание сложности приветствуется. Где не прописана адаптивность, тоже запили сам. Старайся в каждом новом проекте улучшать код. Черпай инфу из инета и литературы. Узнавай полезные приемы.

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

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

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

http://www.ozon.ru/context/detail/id/20279391/ — «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS» Весьма неплохая книга, бегло позволит ориентироваться в основах веб-технологий и понять, как же все это говно вместе работает.

http://habrahabr.ru/post/240219/ — «Выразительный Джаваскрипт» Хавербек Марейн. Вводна книга по JS и программингу в целом. Для новичков может быть сложноватой.

http://frontendbookshelf.ru/ — список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.

http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.

Учебное задания УЛЬТРА ХАРДКОР ЛЕВЕЛ. Если считаешь, что тебе мало учебной хуйни. Сделай это и положи к себе в портфолио. Будет что показать на собеседовании. На данный момент устарели, но попрактиковаться все-таки можно:

Появились новые тренировочные задания с ТЗ:

ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:

Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.

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

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

10 экономящих время советов по CSS, которые я освоила при использовании Sass

Дата публикации: 2020-06-07

От автора: эти 10 советов по работе с CSS помогут вам сэкономить время и лучше взаимодействовать с командой.

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

Вот почему сегодня я делюсь с вами 10 рекомендациями по SCSS, которые помогут вам и вашей команде. Начните использовать их, и ваши товарищи по команде и люди, которые позже примут ваш код, будут вам благодарны. (Кстати … это один из немногих способов получить дополнительные очки к карме.)

Совет № 1: Примите Конвенцию BEM

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

BEM обозначает Block, Element, Modifiers. Дополнительное значение, которое это соглашение об именах CSS-классов вносит в таблицу, очень просто: оно позволяет визуализировать структурированный стиль вашего шаблона. На практике это работает еще проще:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Вы именуете блоки страницы, например: >

Затем, вы именуете элементы внутри каждого блока с помощью двух символов подчеркивания (чтобы показать, что это часть блока): >

И в случае, если у вас есть вариант этого блока, используйте два тире для модификатора: >

Итак, в вашем шаблоне это будет выглядеть так:

Редактирование стилей станет намного проще, потому что вы сможете визуализировать структуру кода:

Совет № 2: Не повторяйтесь, используйте переменную экстраполяцию для имен классов блока

Если вы следуете правилам BEM (или собираетесь это делать), вот еще одна полезная практика, которой вы можете следовать, чтобы ускорить время разработки: использование переменной экстраполяции. Таким образом, вы не будете повторяться.

Это довольно просто — вы просто определяете класс блока в переменной (в приведенном выше примере .button) и заменяете его, используя # <$c>в коде CSS. Давайте используем приведенный выше пример, чтобы увидеть, как это работает:

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

Совет № 3: Структурируйте проект с помощью InuitCSS

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

Вместо этого InuitCSS помогает нормализовать, настроить, гомогенизировать и структурировать таблицы стилей.
Звучит абстрактно? Хорошо, давайте посмотрим, как это происходит.

Во-первых, установите InuitCSS с помощью npm install inuitcss —save. Теперь все, что вам нужно сделать, это познакомиться со структурой каталогов CSS, специфичной для InuitCSS , и следовать ей, чтобы установить структуру ресурсов проекта:

/settings: Здесь находятся все глобальные переменные, настройки всего сайта и конфигурации. Например, вместо того, чтобы объявлять переменные цвета в каждой из таблиц стилей, я просто помещаю их и объединяю в один файл в этой папке.

/tools: В папке «Tools» вы определяете миксины и функции проекта, большую часть времени я использую ее для хранения миксинов Sass, которые использую для адаптивных медиа-запросов.

/generic: Здесь вы можете указать правила CSS с низкой специфичностью, такие как normalize.css, и сбросить наборы правил.

/elements: Когда вам нужно стилизовать неклассированные элементы HTML, такие как ссылки, страницы, изображения, таблицы и т. д., вы можете просто создать для этого таблицу стилей в этой папке.

/objects: В папке объектов вы размещаете объекты, абстракции и шаблоны дизайна, такие как макеты.

/components: Это место, где хранятся стили конкретных компонентов пользовательского интерфейса. Честно говоря, я никогда не использую ее, просто потому, что кодирую свои проекты с помощью Vue.js, а он использует отдельные файловые компоненты.

/utilities: Папка утилит предназначена для всех очень специфичных, очень явных селекторов, таких как анимации, которые вы должны использовать в своем проекте.

Это довольно аккуратно, я знаю!

Совет № 4: Используйте наборы данных для группировки цветов

Если вы используете циклы Sass, я определенно рекомендую использовать наборы данных, особенно если это связано с определением цветов.

Давайте рассмотрим это на примере социальных кнопок. Как вы можете догадаться, социальные кнопки (Facebook, Twitter и т. д.) имеют разные цвета. Поэтому вместо того, чтобы написать это:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Вы можете выбрать более элегантный способ:

Совет № 5: Примите Соглашение об именовании Veli Colorpedia

Если ваше соглашение об именовании цветов светло-розовое, хлопайте в ладоши. Если ваше соглашение об именовании цветов темно-синее, хлопайте в ладоши. Convention Если ваше соглашение об именовании цветов средне-серое, хлопайте в ладоши.

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

Вместо того, чтобы каждый раз чесать голову, я просто использую Veli’s colorpedia. Таким образом, вы получите имена цветов, понятные человеку, но не ограниченные светлым / средним / темным спектром.

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

Совет № 6: Избегайте использования миксинов везде

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

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

Совет № 7: Оптимизируйте медиа-запросы с помощью SASS MQ

Sass MQ — это миксин с открытым исходным кодом, созданный разработчиками, работающими в The Guardian (интересно!). Он удивителен по двум причинам:


Он компилирует ключевые слова и значения px/ em для запросов на основе em, поэтому, когда пользователи увеличивают масштаб страницы, содержимое не оказывается полностью зашифрованным.

Он предоставляет запасные варианты для старых браузеров, таких как IE8.

Это просто работает через компиляцию этого кода:

5 советов по XHTML/CSS-вёрстке

В рамках своеобразной эстафеты, открытой Никитой Селецким и переданной мне Александром Исаковым (UGgallery), публикую 5 небольших практических рекомендаций, касающихся XHTML/CSS-вёрстки и в данном блоге ранее не озвученных.

При ограничении максимальной ширины макета полезно задавать max-width в единицах em (к минимальной ширине это не относится, она обычно задаётся в пикселах). Это позволяет сделать более-менее постоянной длину строки текста в символах по достижении максимальной ширины даже при изменении размера шрифта средствами браузера. Для IE6, не поддерживающего max-width , имеет смысл ограничиться JavaScript-эмуляцией только минимальной ширины макета.

Для элементов в области контента — главным образом, абзацев — полезно задавать только нижнее поле ( margin ) (например, 1em ), верхнее поле при этом обнулив. Это позволяет избежать проблем с кроссбраузерным отображением обтекаемых элементов (в частности, изображений) в том, что касается визуального совпадения верхних кромок текста абзаца и элемента, им обтекаемого.

Чтобы внушить IE5/5.5, что он поддерживает свойство padding для строчных элементов, достаточно включить для соответствующего строчного элемента свойство hasLayout, например, при помощи такого правила:

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

Правила, специфичные для IE5/6, но не нужные для IE7, нередко имеет смысл прятать при помощи условных комментариев в отдельный css-файл, чтобы страница загружалась быстрее не только в нормальных браузерах, но даже в IE7, которому, как ни крути, скоро будет принадлежать основная доля среди браузеров. Более того, такой подход потенциально позволяет избавиться от хаков вовсе (в подавляющем большинстве случаев специфичные для IE5 и IE6 правила можно без проблем объединить) — это может быть полезным, в частности, при динамической генерации таблиц стилей на серверной стороне.

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

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

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

Пятый совет для меня очень интересен. Спасибо. Пошёл экспериментировать.

Пятый — определенно полезный прием! Правда еще стоит дважды подумать о том, что, если JavaScript у пользователя отключен….

Перепечатка любых материалов сайта в любом объёме запрещена

8 советов, которые помогут вам правильно составлять Sass

С помощью Sass создаются синтаксически безупречные таблицы стилей ( Syntactically Awesome Style sheets ), или, по крайней мере, предполагается, что он должен это делать.

При эффективном использовании Sass помогает задать масштабируемый и краткий CSS . При неправильном использовании Sass может реально увеличить размер файла и добавить ненужный или дублированный код.

Ниже приводится ряд полезных советов, которые помогут вам извлечь из Sass максимум пользы…

1. Структурируйте Sass

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

Файлы частичных шаблонов создаются с помощью символов нижнего подчеркивания и не выносятся в отдельные CSS -файлы. Каждый частичный шаблон должен импортироваться с помощью основного Sass -файла ( global.scss ), расположенного в корневой папке Sass .

Вот пример структуры папок, который иллюстрирует этот принцип:

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

Чтобы продемонстрировать это, ниже приводится пример файла global.scss :

2. Используйте переменные Sass более эффективно

Переменные являются одним из наиболее простых элементов Sass , но некоторые разработчики все еще время от времени используют их неправильно. Разработка конвенции о присвоении имен по всему сайту имеет важное значение для работы с переменными. Без нее они менее понятны и возможно их дублированное использование.

Вот некоторые советы по эффективному применению переменных:

  • Назначайте переменным понятные имена;
  • Применяйте и придерживайтесь конвенции назначения имен ( Модульной, BEM и т.д .);
  • Убедитесь, что использование переменной оправдано.

Вот несколько примеров эффективного использования:

3. Используйте меньше примесей

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

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

Примесь rounded-corner может быть использована в любой ситуации, для этого просто нужно изменить значение $arc, тогда ее стоит использовать:

Пример неэффективного использования примеси может выглядеть вот так:

Эта примесь не имеет аргументов и, следовательно, лучше применить заполнитель, что вплотную подводит нас к пункту 4 .

4. Включайте заполнители

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

И компилируемый CSS :

Повторяющийся код в заполнителях выводится только один раз и только для уникальных стилей, применяемых к отдельным селекторам. Если они не используются, стили заполнителей не выводятся вовсе.

Учитывая сказанное в пункте 3 , заполнители можно использовать наряду с примесями, что позволит уменьшить количество дублированного кода и в то же время сохранить гибкость, обеспечиваемую примесями…

5. Используйте для вычислений функции

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

Например, функции полезны для расчета ширины в процентах от конкретного элемента:

6. Поддерживайте порядок и хорошую организацию

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

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

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

7. Ограничивайте количество вложений

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

Вот некоторые золотые правила для вложений:

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

8. Старайтесь делать все проще

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

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

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

Вывод

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

Данная публикация представляет собой перевод статьи « 8 Tips to Help You Get the Best out of Sass » , подготовленной дружной командой проекта Интернет-технологии.ру

Развёрнутое руководство по Sass/SCSS

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.

Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.

Содержание статьи

Зачем использовать Sass/SCSS вместо CSS?

  1. Вложенность — SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
  2. Переменные — в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
  3. Улучшенные математические операции— можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
  4. Тригонометрия — SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
  5. Директивы @for , @while и выражение @if-else — можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь — в итоге на выходе будет обычный CSS.
  6. Миксины (примеси) — можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
  7. Функции можно создавать определения CSS в виде функций для многократного использования.

Препроцессор Sass

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

Синтаксис

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

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS — (.sass) Syntactically Awesome Style Sheets.

XYZ school, Москва, до 250 000 ₽

SCSS — (.scss) Sassy Cascading Style Sheets.

Расширения .sass и .scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

Sass — первая спецификация для SCSS с расширением файла .sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением .scss .

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

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире ( — ), а в препроцессорах знаком доллара ( $ ).

Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку !default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила


Стандартные вложенные CSS-элементы с использованием пробела:

Те же вложенные элементы с помощью SCSS:

Как видно, синтаксис выглядит более чистым и менее повторяющимся.

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

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд

В SCSS используется директива & .

С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.

Результат компиляции Sass (из предыдущего примера) в CSS ниже.

В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).

Миксины (они же примеси)

Миксины объявляются директивой @mixin . После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина. Например, можно определить миксин flexible() , который далее будет включён, например, в класс .centered-elements следующим образом:

Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов( -webkit- или -moz- ).

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

Арифметические операции

Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).

Сложение и вычитание

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

Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел ( 5*6 == 5 * 6 ).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .

Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

Есть три помощника, которые намекнут на возможность деления:

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

Результат компиляции в CSS:

Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .

Ниже показано, как работают директивы @if и @else , вложенные в миксин.

Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .

После компиляции в CSS:

Логические операторы

Описание логических операторов

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

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

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

Пример ниже демонстрирует, как делать не надо.

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

Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:

Пример сложения нескольких строк:

Сложение строк и чисел:

Обратите внимание Свойство content работает только с псевдоселекторами :before и :after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции ( fucntion() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if() — это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

@if — это директива, использующаяся для разветвления на основе условия.

Ниже показано комбо-разветвление с добавлением директивы @else .

Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .

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

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива @for итерируется 5 раз.

Результат компиляции в CSS:

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .

Результат компиляции в CSS:

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px() , возвращающую 300px.

После применения класса .name ширина элемента будет равна 300 пикселям.

Результат в браузере:

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

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

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

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

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

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow() :

Использование функции rad() :

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() .

Заключение

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

Правильная верстка шаблона — советы новичкам и не только…

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

Итак, теперь перейдем к нашей теме. Говорить сегодня будем про верстку. Почему я решил написать данный пост? Есть тому причины. А именно? Моя основная работа — это разработка сайтов, т.е. я создаю сайты клиентам на заказ. Естественно в этом деле не без конкурентов. Часто приходится сталкиваться с работой других верстальщиков. За 5 лет работы я накопил огромный опыт в верстке, но я тем не менее не считаю себя прям гуру верстальщиком и профи, мне есть еще чему учиться. Но извините меня, мне попадаются такие работы верстальщиков, что хочется кричать и вопить на весь интернет — корявая верстка, ужасно написанный код, скорость оставляет желать лучшего. И что самое главное, клиент ведь доволен. В общем, решил открыть глаза хоть немногим на это безобразие.

Основные моменты я разделил по группам.

Код Html и Css

Использование разметки html5

Сегодня верстка с использованием разметки html4 используется все реже и реже. Лично я верстаю только, используя разметку html5. Нет, я не имею ничего против html4 и не считаю это прям грубой ошибкой. Просто я такой человек, который привык идти в ногу со временем.

Использование разметки html5 открывает намного больше возможностей верстальщику. Так зачем же тогда использовать устаревшие методы. Признаться честно есть такие люди, которые не любят что то менять, как привыкли работать по старинке, так и работают… Работая в данной сфере, которая развивается катастрофически бурными темпами таким быть нельзя. Если вы такой человек, то я советую вам задуматься — а тем ли вы делом занимаетесь…

Комментарии в коде

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

И удобно, и визуально красиво.

Скрипты и стили только на нужных страницах

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

Лишние пробелы в html и css

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

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

Порядок подключения скриптов и стилей

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

Добавить комментарий