Правильное использование HTML, CSS и Bootstrap для большого приложения
Я использую CSS около 8 лет - профессионально в течение 1 года. Мне комфортно с Bootstrap, Foundation и Sass. Я понял, что Bootstrap предназначен для создания веб-сайта, который "корректируется" и имеет постоянную разметку. У меня всегда было впечатление, что каждый компонент должен быть в состоянии автономно работать, и на все объекты следует ориентироваться в зависимости от их местоположения и наличия класса, который группирует общие стили для создания прототипов. Затем, когда макет "укреплен", классы можно объединять / абстрагировать, используя sass, чтобы отразить html-узел / контекст, а не применяемые стили. Недавно меня попросили настроить "песочницу" на вкладку "Мои", и мы можем выполнить синхронизацию позже. Несмотря на то, что это облегчает программирование через строки состояния, мой код загрязняется! Важной, потому что я не могу переопределить загрузчик в sass. Другая команда предложила мне создать собственные переменные, а не использовать загрузочную.
Я действительно никогда не знаю, как подходить к макету / тематике и всегда чувствую, что борюсь с Bootstrap. В частности, мне дали макет и попросили реализовать его (пока что не отвечает) с помощью начальной загрузки. Я делаю, и это выходит с глубокой структурой HTML и большим количеством странных отступов и полей. Затем я пытаюсь исправить это, регулируя отступы в зависимости от контекста. Это утомительно, сбивает с толку, и в результате много разметки и переопределений. Код неудобен для чтения и противоречит большинству настроек по умолчанию. Затем UX уточняет наши каркасные рамки, и я обнаруживаю, что много занимаюсь математикой и создаю больше "крайних случаев".
Я подумал о том, чтобы стереть все значения по умолчанию на уровне приложения / вкладки / формы и установить отступы и поля в меньшем количестве мест. Это будет означать, что компоненты не могут стоять отдельно.:(Это был бы более индивидуальный подход, подход снизу вверх. Это лучший способ сделать что-то или мне просто нужно, чтобы UX сократил "крайние случаи", чтобы я мог писать более обобщенные стили?
Другая вещь, которая смущает меня, - то, что является отзывчивым. Я всегда отвечал на размер страницы, чтобы поддерживать / оптимизировать ее визуально. Похоже, что "технически" он использует точки останова - особенно все, кажется, хотят, чтобы это обрабатывалось библиотекой. Я обычно заканчиваю тем, что комбинирую их, чтобы создать базовый макет, который немного откликается, а затем добавляет больше начальной загрузки для альтернативных макетов. Это укусило меня несколько раз. Отдел UX получает новых сотрудников, которые чувствуют, что большие входные данные подразумевают необходимость в большем количестве данных или что второй столбец блоков дальше от первых вещей кажется слишком разбросанным (и то и другое верно). Это плохая практика? Бывший интервьюер также обратился ко мне за подходом (взятым с небольшим количеством соли, поскольку она утверждала, что CSS6 был нормой). Кто-нибудь еще сочетает тонкое растяжение с полными изменениями макета. Это действительно плохая практика?
Насколько глубоко вы внедряете бутстрап в свой макет? Как я уже говорил, я пытался интегрировать все это в форму, и это было головной болью. Вы обычно используете его только на высоком уровне?
Другая вещь, которая меня расстраивает, это то, как плохо Bootstrap и Flexbox работают вместе. Приложение, над которым я сейчас работаю, имеет статическую высоту с прокручиваемыми панелями. Я предложил Foundation for Apps, но нам пришлось использовать Bootstrap, так как он уже использовался многими родственными приложениями. Теперь я застрял с помощью bootstrap для компоновки общих компонентов заголовка и вкладки, затем JS для расчета высоты столбцов (поэтому он установлен статически), затем flexbox для управления высотой их содержимого, а затем снова загрузился для управления макетом этого содержание. Расчеты JS вообще не сочетаются с циклом рендеринга и дайджеста Angular. Это работает, но это чувствительно к изменениям. Я хотел бы сделать все это Flexbox (или Bootstrap с управлением по высоте). Является ли лучшим подходом попытаться убедить нас добавить легкую сетку на основе flexbox, чтобы жить в гармонии с начальной загрузкой? Или это будет полный переход?:/ Мы используем форму группы и много CSS и переменных на данный момент.
Я знаю, что это много вопросов - они накапливались некоторое время.:p Надеюсь, некоторые из вас, ребята, помогут мне выкинуть все это из головы.:) Спасибо!