CSS рекомендации по коду

margin-top - лучше всего подходит, когда вам нужно стилизовать элемент на основе того, какой элемент был до него.

margin-bottom - лучше, когда что-то требует определенного margin-bottom, независимо от того, какой элемент следует за ним.

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

January 29, 2019
by серёжа
0
3

JS

Хороший тон при объявлении ф-ции для события указывать параметр е или event.

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

January 27, 2019
by серёжа
0
3

ARIA - атрибуты для улучшения доступности

<div role="dialog"> - для модальных окон

<header role="banner"> - для шапки

<footer role="contentinfo"> - для футера

<svg aria-label="Facebook"> - для добавления подписи

<svg aria-hidden="true"> - для скрытия элемента от программы для чтения экранов

January 22, 2019
by серёжа
0
3

Flexbox трюки

1. Липкий футер

HTML

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

CSS

body {
 margin: 0;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

header, footer {
 height: 50px; // or another
}
main {
 flex: 1 0 0;
}

2. min-width имеет значение

Возможно, ты думаешь, что несложно заставить все flex-элементы внутри flex-контейнера сжиматься, для того чтобы уместить контент. Наверняка, если ты укажешь flex-shrink: 1 на элементах, они так и будут себя вести, правда?

Может, пример.

Скажем, у тебя есть часть DOM, которая отображает книгу на продажу и кнопку чтобы ее купить.



Ты разместил все с помощью flexbox и все хорошо.

.book {
  display: flex;
}
.book .description {
  font-size: 30px;
}
.book .buy {
  margin-left: auto;
  width: 80px;
  text-align: center;
  align-self: center;
}


(Поскольку ты хочешь кнопку «Купить» справа — даже для очень коротких названий — ты, будучи умным, указал margin-left: auto)


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


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


Некий дурень, много о себе возомнивший, написал книгу с длинным словом в названии.




Все сломано!

Если красная граница обозначает ширину смартфона, и ты скрываешь переполнение (overflow: hidden), ты только что потерял свою кнопку «Купить». Твой коэффициент конверсии — как и эго бедного автора — будет страдать.

(Примечание: к счастью, там где я работаю, есть хорошая QA команда, которая наполнила нашу базу данных разнородным текстом, наподобие такого. В частности, именно эта проблема побудила меня прочитать спецификацию.)

Оказывается, такое поведение происходит из-за того, что min-width элемента описания изначально установлена в auto, что в данном случае равняется ширине слова Electroencephalographically(электроэнцефалографически). Flex-элементу буквально не разрешается быть уже чем это слово.

Решение? Переопределить эту проблемную минимальную ширину min-width: auto установив min-width: 0, указывая flexbox'у, что этот элемент может быть уже, чем содержимое внутри него.

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

.book {
  display: flex;
}
.book .description {
  font-size: 30px;
  min-width: 0;
  word-wrap: break-word;
}
.book .buy {
  margin-left: auto;
  width: 80px;
  text-align: center;
  align-self: center;
}

Результат будет таким:




3. Не используй margin или padding в %

Это не просто уровня «лучшая практика», это уровня «совет-от-бабушки», так что просто делай что говорят и не задавай вопросов.

«Авторам следует полностью избегать использования процентов в padding'ах или margin'ах на flex-элементах» — с любовью, спецификация flexbox.

4. Свойство Flex

  • Если я хочу, чтобы элемент немного сжимался, когда места недостаточно, но не тянулся шире чем ему надо: flex: 0 1 auto или flex: initial
  • Если мой flex-элемент должен тянуться для заполнения всего доступного пространства, и немного сжиматься если места не хватает: flex: 1 1 auto или flex: auto
  • Если мой элемент не должен менять размеры совсем: flex: 0 0 auto или flex: none
January 18, 2019
by серёжа
0
13

How to remember CSS Grid

The explicit grid

  1. grid-template-columns
  2. grid-template-rows
  3. grid-template-areas
  4. grid-column
  5. grid-row
  6. grid-area

Some tips to remember these 6 properties:

  1. The template keyword can only be used on the grid

a) They’re used to declare grids and named areas

 b) Properties with the template keyword are plural

2 .Properties for grid items do not have the template keyword

a) These properties are singular

b) These properties affect positioning

Gaps

There are three properties to remember:

  1. grid-column-gap
  2. grid-row-gap
  3. grid-gap

grid-column-gap determines the space between columns.

grid-row-gap determines the space between rows.

grid-gap is a shorthand for grid-column-gap and grid-row-gap.

For this shorthand:

  1. the column value comes first: column-gap / row-gap
  2. If you use a single number, both values will be that number.

Aligning things

There are six properties to align things:

  1. justify-content
  2. align-content
  3. justify-items
  4. align-items
  5. justify-self
  6. align-self

Implicit Grid

Let’s say you created a CSS Grid, but you don’t have enough rows. In this example below, I only created an explicit grid for three items (3 columns, 1 row).

.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-row: 3em;
}

But I have six items!

<!-- This is HTML -->
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

When you don’t have enough space in your explicit grid, CSS Grid will help you create additional grids automatically. By default, it’ll create more rows.

If you want to switch the grid direction, you’ll set grid-auto-flow to row.

This automatically created parts are called the implicit grid.

You can adjust the automatically created column(s) or row(s) with these two properties:

  1. grid-auto-columns
  2. grid-auto-rows
.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 3em; 
  grid-auto-rows: 6em;
}

How to remember the implicit grid

auto is the keyword you want to watch out for.

  1. template creates the explicit grid
  2. auto creates the implicit grid

I use the implicit grid a lot. I’ll share how I use CSS Grid in another article.

Wrapping up

That’s almost every CSS Grid property you need to know for 80% of your grids! Here’s a summary of the properties you learned:

Creating a grid

a. Explicit: 

 1) grid-template-columns 

 2) grid-template-rows 

 3) grid-template-areas 

b. Implicit:

 1) grid-auto-columns 

 2) grid-auto-rows

c. Gaps: 

 1) grid-column-gap

 2) grid-row-gap 

 3) grid-gap

d. Positioning items in a grid:

1) grid-column

2) grid-row

e. Aligning things:

1) justify-content 

2) align-content 

3) justify-items 

4) align-items 

5) justify-self 

6) align-self

January 18, 2019
by серёжа
0
4

Организация CSS-файлов: шаблон «7–1»

Давайте поговорим об организации CSS-файлов. То, что вы узнаете из этой части нашего разговора, позволит вам работать продуктивнее, и поможет, в соответствующих ситуациях, мгновенно находить CSS-код, который надо изменить. Для того чтобы всего этого добиться, нам понадобится изучить шаблон «7–1».

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

  1. Все файлы с SCSS-фрагментами надо разместить в 7 разных папках.
  2. Все эти файлы нужно импортировать в один файл, main.scss, расположенный в корневой директории, в которой лежат все эти папки.

Название шаблона, в результате, можно расшифровать, как «7 папок — 1 файл». Как видите, всё не так уж и сложно. Поговорим об этом шаблоне подробнее.

7 папок

Вот папки, о которых идёт речь:

  1. base: в этой папке надо разместить весь, так сказать, «шаблонный» код. Под «шаблонным» кодом здесь понимается весь тот CSS-код, который приходится писать при создании нового проекта. Например: типографские правила, анимации, утилиты (то есть — классы вроде margin-right-largetext-center), и так далее.
  2. components: название этой папки явно указывает на то, что в ней будет храниться. Речь идёт о стилях компонентов, используемых для сборки страниц. Это — кнопки, формы, всяческие слайдеры, всплывающие окна, и так далее.
  3. layout: эта папка применяется для хранения стилей элементов макетов страниц. Это — шапка и подвал страницы, навигационная область, различные разделы страницы, сетка, и так далее.
  4. pages: иногда в проекте нужны страницы, обладающие собственным специфическим стилем, который отличается от стиля остальных страниц. Описания стилей для таких вот особенных страниц и попадают в эту папку.
  5. themes: если веб-проект предусматривает использование различных тем оформления (скажем, нечто вроде «dark mode», или «admin»), стили для них надо положить сюда.
  6. abstracts: в эту папку попадают всяческие вспомогательные вещи — функции, переменные, миксины.
  7. vendors: редкий сайт обходится без внешних зависимостей. В этой папке хранятся стили, которые созданы не тем, кто разрабатывает конкретный сайт. Сюда, например, можно сохранить файлы проекта Font Awesome, стили Bootstrap и прочее подобное.
sass/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Sass Variables
|   |– _functions.scss    // Sass Functions
|   |– _mixins.scss       // Sass Mixins
|
|– base/
|   |– _reset.scss        // Reset/normalize
|   |– _typography.scss   // Typography rules
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|
|– layout/
|   |– _navigation.scss   // Navigation
|   |– _grid.scss         // Grid system
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _sidebar.scss      // Sidebar
|   |– _forms.scss        // Forms
|
|– pages/
|   |– _home.scss         // Home specific styles
|   |– _about.scss        // About specific styles
|   |– _contact.scss      // Contact specific styles
|
|– themes/
|   |– _theme.scss        // Default theme
|   |– _admin.scss        // Admin theme
|
|– vendors/
|   |– _bootstrap.scss    // Bootstrap
|   |– _jquery-ui.scss    // jQuery UI
|
`– main.scss              // Main Sass file
January 18, 2019
by серёжа
0
21
Show more