Reboot

Во-первых

Как начинающий веб разработчик хочу искренне поблагодарить автора за труд! Жаль только, что не нашел раньше и несколько недель убил на создание чего-то примитивно подобного для своих будущих проектов…

По теме

Мне всегда несколько не нравился normalize.css, через те трудности, которые он создает при верстке. Возможно они возникают только у меня, из-за отсутствия опыта (не судите строго, если че 😃) ), но впервые его увидев, первое желание было - половину переписать 😦 На днях наткнулся на альфа версию Bootstrap 4.0. В будущем релизе бутстрапа авторы сделали все то, о чем я думал. Сразу после normalize (в перспективе, вместо) они подключают свой Reboot, которым переопределяют некоторые стандартные правила и задают определенный стиль построения css. Например - обнуляют все margin’s кроме margin-bottom и дальше позиционирование страницы по вертикали осуществляется только за счет margin-bottom, что помимо удобной логической структуры предостерегает от схлопывания марджинов. Также обнулены базовые стили для некоторых элементов, которые почти никогда не используются по назначению (прим.: ul> li), что никоим образом не помешает создавать красивые списки используя кастомные классы.

В общем посмотреть можно тут , и почитать здесь.

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

Напоследок хочу предложить свой @mixin для удобной работы с @font-face, он не идеален, но позволяет сократить много времени, особено если шрифтов много, также имеется фикс бага в Хроме.

@mixin font-face($font-name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
  $src: null;

  $extmods: (
    eot: "?#iefix",
    svg: "#" + str-replace($font-name, " ", "_") //- сама функция под миксином
  );

  $formats: (
    eot: "embedded-opentype",
    otf: "opentype",
    ttf: "truetype"
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($font-name);
    font-style: $style;
    font-weight: $weight;
    @if(map-has-key($extmods, eot)){ src: url("#{$path}.eot")}
    src: $src;
  }

    // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering//

   @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
        src: url('#{$path}.svg##{$font-family}') format('svg');
    }
  }
}

//функция str-replace для поддержки svg формата

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

пс: извините за много букв и если я где-то пишу полную чушь прошу понять, простить и указать путь 😃

[jt3k]

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

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

[artem-malko]

В общем, закрываю и создаю issue для выбора нормалайза или чего-то подобного ну и none тоже