MATOV.PRO

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

Режимы и состояния в SCSS

Режимы и состояния в SCSS

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

Палитра цветов для веб-разработки

Палитра цветов для веб-разработки

Дизайнерам и фрондендерам посвящается. Сказ о том, как с палитрой удобно работать. Речь не о том как выбрать палитру цветов, а том, как именно с ней работать: к какому виду её привести, как сделать так, чтобы по ходу разработки не пришлось цвета делать «чуть-чуть поярче» (смайл).

Таргетинг стилей по устройству

.some-block {
    z-index: 1;
    position: relative;
    
    @include device(desktop, ie, tablet) {
        @include section(portfolio) {
            border: 1px solid #000;
            }
        }
    }

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

Чаша ресурса

Пару лет назад вдохновлённый заметкой про «революционную систему управления рабочим временем» Артёма Горбунова о философии организации рабочих процессов внедрённой в одноименной студии, я озадачился вопросом: а сколько нужно человеческого ресурса для стабильной работы подразделения?

Чаша Ресурса

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

Веб-страница — это документ

Как работают frontend-разработчики

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

Двухсимвольные классы

<body class="ic">
    <div class="ik">…</div>
    <nav class="jg">…</nav>
    <div class="j6">
        <header class="b6 ff">…</header>
        <div class="eo">
            <section class="ep av">…</section>
            <section class="ep ci">…</section>
            <section class="ep a2">…</section>
        </div>
    </div>
</body>

Строго говоря, вопрос длинных классов актуален не только для БЭМ. Просто для БЭМ, данный вопрос актуален особенно. К тому же, я ярый сторонник семантики в HTML-разметке. И наличие семантичных классов вида my-super-puper-duper-class, считаю, стало уже давно архаизмом. Вот и решился сделать CSS-классы по БЭМ короче, сильно короче, а именно, из двух символов. Что ж, сказано — сделано.

О модификаторах

.foo {
    display: block;

    &.foo_modificator {
        display: inline-block;
        }
    }

Модификатор (в БЭМ) — некая сущность, которая может влиять на внешний вид, состояние и поведение блока/элемента. А какие бывают модификаторы?