wakenbyWork

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

Мы не знаем, как нужно работать с неизвестным нам API. Очевидно, что там есть какая-то пагинация, если данные с номера 51 можно всё же как-то получить. Как эта пагинация выглядит, нам неведомо.

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

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

Если можно сделать без высчитываний отступов - лучше делать так.

& можно засунуть в переменную. пример https://codepen.io/colinlord/pen/KozWWP/

Только поменяй php файл на html
не нужные блоки удали

############################################################################
#### Стандартный .htaccess для проектов студии Клондайк, версия 4.6     ####
############################################################################
RewriteEngine On
   #  Директива включает редиректы.
RewriteBase / 
   # Без директивы (.*) = /$1 будет /var/wwww/site/web/$1  с директивой  = /$1
Options +FollowSymLinks
   # Разрешает переход по символическим ссылкам.
php_flag display_errors off
  # запретить отображение ошибок  (требование монитора качества)
php_flag allow_url_fopen off
  # запретить  использовать удаленные файлы (требование проактивной защиты)

############################################################################
#### Выбор основного зеркала (с www или без www)                        ####
############################################################################
    # 1. Удалить www
RewriteCond %{ENV:HTTPS} on
    #Если включен https
RewriteRule .* - [E=SSL:s]
    #То создаем переменную  ssl с текстом s
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
    # Проверяем, содержит ли домен www в начале URL.
RewriteRule ^(.*)$ http%{ENV:SSL}://%1/$1 [R=301,L]
    # Перенаправляем удаляем www

    # 2. Добавить www
#RewriteCond %{ENV:HTTPS} on
    #Если включен https
#RewriteRule .* - [E=SSL:s]
    #То создаем переменную  ssl с текстом s
#RewriteCond %{HTTP_HOST} !^www\.(.*) [NC]
    # Если нет www в начале домена
#RewriteRule ^(.*)$ http%{ENV:SSL}://www.%{HTTP_HOST}/$1 [R=301,L]
    #Подставляем www и https если он включен.

############################################################################
#### Перенаправляем протокол https на http                              ####
############################################################################
#RewriteCond %{HTTPS} on
   # Проверяем наличие https в URL.
#RewriteRule ^.*$ http://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
   # Перенаправляем протокол на http.

############################################################################
#### Перенаправляем протокол http на https                              ####
############################################################################
RewriteCond %{HTTPS} off
   # Проверяем наличие https в URL.
RewriteCond %{REQUEST_URI} !^/bitrix/admin/1c_exchange\.php$ [NC] 
   #  Исключим обмен с 1С, ему требуется только 200 
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
   # Перенаправляем протокол на http.

############################################################################
#### Убираем index.php, если он есть в конце URL                        ####
############################################################################
RewriteCond %{REQUEST_URI} ^(.*)/index\.php$
   # URL cодержит index.php в конце.
RewriteCond %{REQUEST_METHOD} =GET
   # Выявляем GET запрос в URL (не POST).
RewriteRule ^(.*)$ %1/ [R=301,L]
   # Удалить index.php из URL.

############################################################################
#### Убираем повторяющиеся слеши (/) в URL                              ####
############################################################################
RewriteCond %{THE_REQUEST} //
   # Проверяем, повторяется ли слеш (//) более двух раз.
RewriteCond %{QUERY_STRING} !http(s|)://
  # Убедимся что это не урл в  GET
RewriteRule .* /$0 [R=301,L]
   # Исключаем все лишние слеши.

############################################################################
#### Убираем слеши в конце URL для статических файлов (содержит точку)  ####
############################################################################
RewriteCond %{REQUEST_URI} \..+$
   # Если файл содержит точку.
RewriteCond %{REQUEST_FILENAME} !-d
   # И это не директория.
RewriteCond %{REQUEST_FILENAME} -f
   # Является файлом.
RewriteCond %{REQUEST_URI} ^(.+)/$
   # И в конце URL есть слеш.
RewriteRule ^(.+)/$ /$1 [R=301,L]
   # Исключить слеш.

############################################################################
#### Добавляем слеш(/), если его нет, и это не файл.                    ####
############################################################################
RewriteCond %{REQUEST_URI} !(.*)/$
   # Если слеша в конце нет.
RewriteCond %{REQUEST_FILENAME} !-f
   # Не является файлом.
RewriteCond %{REQUEST_URI} !\..+$
   # В URL нет точки (файл).
RewriteCond %{REQUEST_URI} ^(.+)$
 # В URL есть хоть один символы
RewriteRule ^(.*)$ $1/ [L,R=301]
   # Добавляем слеш в конце.


############################################################################
#### Компрессия статического контента для гугл  спид тест               ####
############################################################################
<IfModule mod_deflate.c>
  AddType image/svg+xml .svg
  AddOutputFilterByType DEFLATE image/svg+xml  
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>
<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/svg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>
  <IfModule mod_headers.c>
  <filesmatch "\.(ico|flv|jpg|jpeg|webp|png|gif|css|swf|woff|pdf)$">
    Header set Cache-Control "max-age=31536000, public"
  </filesmatch>
  <filesmatch "\.(html|htm)$">
    Header set Cache-Control "max-age=7200, private, must-revalidate"
  </filesmatch>
  <filesmatch "\.(pdf)$">
    Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  <filesmatch "\.(js|otf|ttf|woff|woff2)$">
    Header set Cache-Control "max-age=31536000, private"
  </filesmatch>
  </IfModule>
############################################################################
#### Конец общей части, далее следует собственные директивы .htaccess   ####
############################################################################

RewriteRule ^([^.]+)\.html$ myDomain.rul/$1 [R=301,L]

Домен можно убрать совсем и оставить только /$1
RewriteRule ^([^.]+)\.html$ /$1 [R=301,L]

Или брать домен из %{HTTP_HOST}

RewriteRule ^([^.]+)\.html$ https://%{HTTP_HOST}/$1 [R=301,L]

Использовать целую библиотеку ради одной линии это конечно сильно : )
Используйте Rete.js если не хотите заморачиваться ради одной линии.
Но ничего сложного нету на самом деле. Нужно просто нарисовать необходимую линию на канвасе, наложить его сверху на ваши элементы и установить ему pointer-events: none. Вот и все.

Эта разметка абсолютно правильная в двух случаях:
1) Ваши `close` и `card` действительно нигде не переиспользуются;
2) Объём стилей блока `some-class` остаётся адекватным для восприятия.

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

Возьмём разметку посложнее (не надо в ней искать какого-то смысла, просто от фонаря что-то набрал для иллюстрации):

<div class="block">
  <!-- Header -->
  <div class="block__header">
    <h2 class="block__title">Title</h2>
    <div class="block__actions">
      <button type="button" class="block__action block__action--edit">
        <span class="block__action-icon"></span>
      </button>
    </div>
  </div>
  <!-- Content -->
  <div class="block__content">
    <p>...</p>
  </div>
  <!-- Footer -->
  <div class="block__footer">
    <div class="block__about">
      <div class="block__author"></div>
      <div class="block__date"></div>
    </div>
    <div class="block__awards">
      <div class="block__award">
        <div class="block__award-inner"></div>
        <div class="block__award-tooltip">
          <div class="block__award-tooltip-content"></div>
          <button type="button" class="block__award-tooltip-close"></button>
        </div>
      </div>
    </div>
  </div>
</div>

Положим, что весь контент этого блока уникальный и никак не переиспользуется.
Объём стилей `block` при такой структуре неизбежно станет некомфортным для восприятия, строк на 200-300.

В таком случае хорошо создать внутренний блок (или несколько) просто для того, чтобы размазать сложность.
`block-header`, `block-footer` или даже `block-footer-award`.

Самое главное здесь организовать файловую структуру / конфигурационный файл / чем вы там ещё собираете таким образом, чтобы было очевидно, что `block-footer` - это не самостоятельный блок, а внутренний блок `block`, нужный только для упрощения восприятия, и он не может / не должен использоваться в отрыве от него (в этом случае у него не должно быть в названии общего префикса с `block`, чтобы не создавать путаницу)

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

https://punkapi.com/documentation/v2

Нет, неправда.

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

Они не поддерживаются на данный момент в GC.

https://caniuse.com/mdn-css_at-rules_media_range_syntax

да. это нормальное поведение. по умному можешь фиксить через высчитывание ширины скролла. погугли. там есть решения.
по простому - просто отнимай 17px.
.overlay {width: calc(100% - 17px);}

пока еще остаются девайсы такого разрешения - будет актуальным. к примеру iphone se 2016 - 320px
а вообще по нормальному нужно смотреть именно статистику по сайту. к примеру в той же яндекс метрике можно узнать разрешение экрана пользователей. отсюда уже исходить - нужно тебе поддерживать 320px или нет

Пошаговый туториал:
product.hubspot.com/blog/how-to-build-a-sleek-anim...

Внешние отступы и позиционирование относительно родительских блоков необходимо делать при помощи модификаторов либо миксов. Модификаторами определяем базовые стили, миксами переопределяем стили в контексте текущего блока.

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

Исключительно первый вариант.

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

Видим класс some-block__el--theme-dark, надо найти стили:

1. Вычленяем название блока - переходим к файлу, в котором находятся стили блока (`some-block.scss`)
   
2. Далее либо `Ctrl+F` по модификатору `--theme-dark` (чаще всего)
   
3. Либо сначала к `Ctrl+F` элементу `__el` и внутри находим модификатор
   

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

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

P.S. Из этого можно заключить, что "а давайте вообще откажемся от нестинга и будем искать в один приём сразу по классу целиком".
Есть те, кто разделяют это мнение. Я категорически не разделяю, но это тема для отдельной дискуссии. :)
Вам советую остановиться на том, что нестинг отдельных БЭМ-сущностей (элементов и модификаторов) - хорошая идея, а нестинг для композиции БЭМ-сущностей - не очень хорошая :)

P.P.S. И лучше для разделителя между модификатором и его значением использовать что-то отличное от префикса самого модификатора - меньше в глазах рябить будет, когда модификаторов станет 3-4 штуки на одном элементе ^^