Расстановка полей и отступов в CSS

Супер, спасибо!

Расстановка полей и отступов в CSS

Наглядное и простое изложение, спасибо! С переводом терминоголоией margin и padding не везло раньше, было много путаницы.

+100500:

В боксовой модели (box model) поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №198 (7 — 14 февраля 2016)

Здорово, что мой доклад попал в дайджест.

Буду рад вопросам и предложениям:

• github.com/alexbaumgertner/presentation-bem-stack/issues
• Telegram: alexbaumgertner
• mail: [e-mail]
• twitter: twitter.com/alexbaumgertner

БЭМ-методология: с чего всё начиналось и зачем это всё нужно

Если интересно посмотреть на БЭМ + Sailsjs (как Rails только на javascript), у меня есть

• презентация alexbaumgertner.github.io/presentation-bem-stack
• и проект github.com/bem-under-sailsjs/barbershop-bem-sails

Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса

github.com/alexbaumgertner/sails-bem-project-stub – это sailsjs + BEM

Как выглядит рабочий день IT-инженера, если ты девушка

Эх, почему до сих пор работодатели даже крупных компаний экономят на стульях?

Тысяча и одна gif

Герой DOOM!

Верстка для самых маленьких. Верстаем страницу по БЭМу

Да, к сожалению, порог входа выше, чем «писать html».

Книга «How Google Tests Software» теперь на русском!

Дружище, я купил две и одну из них послал тебе по почте :)
А по теме – да, не удобно сделано, хочется СМС-кой мочь оплатить. И электронными деньгами.

Текущая ситуация:

Электронные деньги в России ограничат

СССР стал свехдержавой в результате нечеловеческого перераспределения человеческих ресурсов (простите за тавтологию). Репрессии, экспроприация, раскулачивание, изъятия ресурса из деревни (к чему это привело можно увидеть сейчас в любой деревне). Потом стали продавать нефть, но даже выгодная конъюнктура рынка не спасла от дефицита 70-80. Посмотрите разрешенные (пока) советские фильмы, «Служебный роман,» «Гараж» и тд.)

Электронные деньги в России ограничат

Нефть в цене не растет, экономика в застое – надо увеличить налогооблагаемую базу!

Электронные деньги в России ограничат

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

Кстати, вполне вероятное развитие событий в ближайшие пару лет.

В чем проблема «проблемы БЭМ'а»?

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

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

не типизирует входы/выходы и не даёт нам никаких статических гарантий.

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

Плохо ли использовать js функции в коде шаблонизатора? Безусловно плохо, вы превращаете декларитивный стиль, ради которого вся эта шумиха с БЭМом и затевалась, в обычные императивные js подпрограммы.

BEMJSON — это данные (шаблонизатор — BEMHTML), и в конкретном примере я показал возможность прототипирования контента страницы. Естественно, это не продакшен код.

Я бы начал с синтаксиса, потом переписал бы декларацию стилей из css прямо в BEMJSON через миксины a la SASS/compass

BEMJSON про струтуру блока, за оформление отвечает старый добрый CSS блока, не нужно смешивать структуру и оформление — это как раз хорошее, что есть в HTML+CSS. Или я вас не так понял?

Спасибо за подробные комментарии!

В чем проблема «проблемы БЭМ'а»?

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

В BEMJSON вы можете выполнить произвольный js, например, для прототипирования:

{
  block: 'b-foo',
  content: [
    {
      elem: 'bar'
    },
    {
      elem: 'container',
      content: (function() {
      
                   var contentVariants = ['Hello World', 'Hello Mars', 'Hello, Futurama'];
                   return contentVariants[Math.floor(Math.random() * contentVariants.length)];
         }())
    }
  ]
}

И главное — BEMJSON он не про HTML, он про более высокий уровень абстракции — блоки.

В чем проблема «проблемы БЭМ'а»?

Мне вот прямо хочется взять и дать ссылку на мой cornerJS

Лучше давайте

через ~3 года 95% браузеров как минимум с полифиллом будут поддерживать технологию

и

полифилл

приложите пожалуйста.

В чем проблема «проблемы БЭМ'а»?

Покажите пожалуйста примеры избыточности BEMJSON. Я сравнивал с XML, последний явно избыточней.
haml лишь подслащивает HTML. Альтернативы?

В чем проблема «проблемы БЭМ'а»?

Потому что единственная и первоочередная задача БЭМа — это инкапсуляция классов.

Вы забываете, что фронтенд — это еще и javascript. Без методологии в любом более-менее сложном проекте код быстро превращается в лапшу.
С помощью i-bem вы инкапсулируете логику работы в блоке. У вас не только css независимый, но и javascript имеет модульную расширяемую структуру, органично отражающую общую концепцию BEM.

В чем проблема «проблемы БЭМ'а»?

Буду благодарен, если сообщите подробнее OS и версию браузера, я проверил, у меня бага не повторяется (Mac OS 10.8):

В чем проблема «проблемы БЭМ'а»?

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

Примеры не случайные.

В чем проблема «проблемы БЭМ'а»?

Верстаю по БЭМу и забываю. Нет нужды помнить все эти nav > ul > li.

Вот вы, никогда не видели верстку и тут видите такой код:

<div class="user-thumb">
   <div class="user-thumb__name"></div>
</div>

Сложно понять, где будет имя пользователя?