• Использование множества классов в html или наследие в css?

    @strelok011
    Добавлю к первому комментатору несколько замечаний
    1. Чтобы качественно верстать, надо знать, что происходит по капотом. Каскады в css - не просто так называются каскадами. Браузер парсит цепочку каскада начиная с самого правого класса. Отсюда и следствие, что выгоднее для производительности: если мы пишем .mybox div div a, то парсер берет все теги a на странице, проверяет первое условие вложенности в div, потом следующее... Если же писать .mybox .inbox .link - то выборка будет только элементов с указанными стилями.
    2. Хороший стиль в верстке - когда следующий за тобой разработчик не проклинает тебя и всю твою родню из-за загадок и кривого кода. Писать надо лаконично и максимально понятно. Современные мощности позволяют не заморачиваться с длиной имен классов.
    3. Верстать лучше всего исходя из предварительного анализа структуры страницы. Можно создать страницу с типографикой, вынести туда все универсальные переиспользуемые компоненты и блоки, оформить их так, чтобы ничего не ломалось при изменении вложенности. Все изменения базового компонента делать через класс-модификатор. Каскады стоит делать в случае, когда в рамках одного компонента прослеживается постоянная структурная и смысловая связь. Т.е. блок вывода анонса новости всегда имеет заголовок, дату, анонс и ссылку. Можно делать каскадом, можно делать по БЭМ прописывая все зависимости в именах классов.
    Но если уж взялся использовать какой-то подход - важно пользоваться именно такой устоявшейся конструкцией.
    Всех благ :)
    Ответ написан
    1 комментарий
  • Какую cms для сайта лучше выбрать?

    @strelok011
    Если уж подходить именно с точки зрения объединения реакта с cms, то от системы управления нужна только админка с бэкендом. Такие cms называются headless cms.
    https://habr.com/ru/post/444600/
    Ответ написан
    1 комментарий
  • Как изменить цвет SVG-спрайта?

    @strelok011
    Добавлю еще - у выделенного path назначен класс stg, т.к. это сделано внутри svg, там же следует для начала искать список классов. Наверняка там же персонально для каждого элемента в спрайте прописаны свойства.
    Ответ написан
    Комментировать
  • Почему футер не крепится к низу?

    @strelok011
    Вот недавно пример собирал, для другого вопроса на этом сайте https://codepen.io/Strelok011/pen/jOPOqbP
    Ответ написан
  • Как реализовать на готовом меню клик по выпадающему списку и совместить его с hover при наведении?

    @strelok011
    Мобильные браузеры не имеют события hover (мышки ж нет). Они его эмулируют, и это не очень качественно.
    Нормальное меню пишите на js. Вместо ховера будут события mouseover/out, mouseenter/leave https://learn.javascript.ru/mousemove-mouseover-mo...
    Ну и click соответственно.
    Как альтернатива - оставляете ховер на десктопе, для мобильного вида ховер стили отключаете через media queries, оставляете обработку только клика.
    Примеров реализации много найти можно.
    Ответ написан
  • Почему не работает мета тег Description?

    @strelok011
    Алгоритм анализа страниц поисковиками постоянно меняется с целью улучшить точность попадания описания страницы в ее содержание. И поисковики будут смотреть и на дескрипшн, и на микроразметку, и на содержимое тегов заголовков и подзаголовков.
    Ко всему выше перечисленному - алгоритмы секретные, SEO-конторы чуть ли не наощупь изучают, плюс рекомендации самих поисковиков.
    Ответ написан
    Комментировать
  • Как мне стать middle-frontend?

    @strelok011
    Вот неплохой роадмап для понимания, что нужно знать специалисту по реакту для примера
    https://proglib.io/p/react-developer-2019
    Весьма неплохо покрывает необходимый стек.
    Меняете реакт на любой другой фреймворк, актуализируете библиотеки и технические нюансы, дерево в целом останется актуальным.

    По поводу обучения - идите в любую студию падаваном.
    Отличие самостоятельного изучения от работы в команде - в команде всегда найдется специалист, готовый поделиться кратчайшим путем решения проблемы. Плюс - боевые задачи крайне способствуют закреплению материала в отличие от сферических коней в вакууме.
    Ответ написан
    Комментировать
  • Как сделать full screen block?

    @strelok011
    Если я правильно понял сумбур вопроса и разметку (что-то во вложенности header > header__wrapper > header_panel + Main-Screen какая-то ДИЧЬ :)))) ), вам нужен какой-либо из этих рецептов, связанных с прибитием футера к низу страницы dimox.name/press_footer_bottom_with_css
    Как и автор - рекомендую использовать flex, как наиболее соответствующий моменту.

    p.s. не используйте в наименованиях css классов больших букв.
    Ответ написан
  • Как правильно сделать адаптивную шапку на сайте с точки зрения SEO?

    @strelok011
    Судя по тому, что материалайз, используя гайдлайны гугла, предлагает для мобильного вида выдвижной сайдбар с дублированием навигации, логотипа и проч, СЕО не пострадает. Использую подобный подход на нескольких сайтах - никто не жалуется, поисковики индексируют.
    Ответ написан
  • Как использовать нескольких css-фреймворков в одном проекте, не прибегая к помощи SASS/SCSS?

    @strelok011
    1. Не рекомендую скрещивать два фремворка из-за сброса дефолтных стилей и переопределения некоторых стилей прямо для тегов в обход классов.
    2. Материалайз подразумевает подключение своего js, активно используемого при оформлении различных анимашек, для тех же форм, к примеру. Можно это обойти, но зачем тогда его использовать?
    3. Если Вы все же решитесь продираться через колоссальный ворох проблем в результате скрещивания ежа и ужа (в дрожь кидает), то почему отказываетесь от использования препроцессоров? Можно вытащить материалайз в виде npm-пакета и импортировать из него только необходимую часть стилей, да еще и докрутить на эти стили модификатор, который позволит хоть как-то разделить влияние фреймворков.

    Я бы предложил использовать тот фреймворк, в котором больше плюшек, а из второго простой копипастой тащить нужное.
    Ну и - учите препроцессоры. Это реально киллерфича.
    В ангуляр проекте всё это не сложно настроить по примерам. Равно как и подключить вместо css фреймворка тяжелую артиллерию типа MaterialUI
    Ответ написан
    Комментировать
  • Как создать сброс значения при изменении input?

    @strelok011
    Хм. А что мешает при снятии по клику ридонли в этой же функции сохранить в переменной значение? Или при получении данных для ридонли элемента то же самое сделать? Нафига городить огород когда утки уже улетели?
    Ответ написан
    Комментировать
  • Плавное появление display:block;?

    @strelok011
    Используйте анимацию opacity в css с помощью keyframes. Из минусов - display none выключает из потока ваш элемент, соответственно плавное появление годится только для абсолютно спозиционированного элемента.
    Вот здесь есть комментарий с примером keyframes https://stackoverflow.com/questions/8449933/animat...
    Ответ написан
    Комментировать
  • Как решить проблему с отступами?

    @strelok011
    Не очень понимаю - у Вас красные блоки должны растягиваться по ширине с постоянными отступами? или отступы должны увеличиваться, а блоки быть фиксированными?

    Предложу использовать вместо flex grid https://xsltdev.ru/css/grid-guide/grid-5/
    Ответ написан
  • Как отключить автоматическое обновление страницы?

    @strelok011
    Код php работает на стороне сервера, а Вы хотите чтобы сортировка отработала на стороне клиента без перезагрузки страницы. Вам необходимо написать на js фронтовую часть, которая будет заниматься приемом и отправкой данных без перезагрузки страницы (ajax) и соответствующие этому эндпойнты на стороне сервера (php).
    Ответ написан
    Комментировать
  • Как сделать так чтобы блок не съезжал вниз?

    @strelok011
    Если я не ошибаюсь, то надо добавить контейнеру ширину 100% и box-sizing: border-box.
    Лучше будет, если Вы код куда-нибудь в доступное место будете выкладывать, кстати говоря.
    Ответ написан
    4 комментария
  • Как корректно открыть ссылку через #?

    @strelok011
    Докину еще в копилку идей - отправку формы сделать через аякс, при успешной отправке сделать редирект с текущей страницы на нужную. Ну и роутинг построенный на # - крайне странная идея, конфликты с дефолтным поведением браузеров.
    Ответ написан
    1 комментарий
  • Как сделать такой градиент в css?

    @strelok011
    Вам сюда www.colorzilla.com
    Ответ написан
    Комментировать
  • Как загружать блок div при определенном условии?

    @strelok011
    Два момента :
    1. Постановка вопроса - правильная? Вам данные в зависимости от ширины устройства надо подтягивать с сервера?
    2. Если вопрос только в отображении - сейчас все браузеры поддерживают media-query, можно регулировать внешний вид страницы опираясь только на них. Выше дали ответ как именно. И использовать js, не говоря уже о jquery - это моветон и признак незнания css.
    Ответ написан
    Комментировать
  • Почему Не грузит шрифт в chrome, на IOS?

    @strelok011
    Вообще стоит поглубже погрузиться в вопрос поддержки шрифтов на разных операционных системах и в разных браузерах. Например тут https://webformyself.com/ponyatie-formatov-shrifto...

    Чтобы не забивать себе голову - можно обратиться на этот ресурс https://www.fontsquirrel.com/tools/webfont-generator
    Обратите внимание на расширенный режим, возможно Вам удастся уменьшить итоговый файл по размеру, отключив ненужные языки и дополнительные символы

    Позволяет загрузить шрифт и на выходе получить архив с нужными вариантами шрифтов и css для подключения.

    Важное предупреждение - конвертер отсеивает известные ему коммерческие шрифты, т.к. если гарнитура продается - проблема продавца предоставить все нужные форматы.
    Ответ написан
    Комментировать
  • Нужно ли поддерживать браузер Internet Explorer для мобильных телефонов?

    @strelok011
    p.s. Чисто для справки - на андроиде существует мобильный Microsoft Edge, который не IE. Для чистоты эксперимента проверяйте фронт и в нем.
    Ответ написан
    Комментировать