Как начать структурировать свой собственный CSS, когда вы не работаете с такими фреймворками, как bootstrap / bulma / materialize

Question

Я начинаю новый угловой проект, и было решено не использовать фреймворк, такой как bootstrap / bulma / materialize / ..., но написать собственную библиотеку компонентов sassy.

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

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

Answer 1

В большинстве моих проектов на сегодняшний день я не использовал фреймворк, написал свою собственную библиотеку CSS и рекомендовал бы ее. У меня нет опыта работы с Angular, только React. Все, чем я могу поделиться с вами, это мои текущие настройки.

Я использую gulp для компиляции файлов SASS в файл main.css и методологию BEM (Вы также можете посмотреть SMACSS ). Каждый «блок» (определяется БЭМ) имеет отдельный файл в макете или модулях.

Я разделяю мои файлы SASS в следующую папку:

1. База - Используется для - сброса / сетки / помощников / типографии / базы (общие базовые стили, например, обтекание)
2. Макет - Используется для контейнеров - верхний / нижний колонтитул / боковая панель и т. Д.
3. Lib - используется для смесей
4. Модули - используются для компонентов - форма / кнопка / оповещение / значок / аккордеон и т. Д.
5. Настройки - цвет / шрифт / отзывчивый - используется для установки переменных sass, которые будут использоваться во всех других файлах.

Надеюсь, это поможет.

Answer 2

С моей точки зрения, это не простая задача. Но вы можете начать с использования SCSS , что даст вам широкий доступ к повторному использованию термина. Также вам может понадобиться работать с flexbox / grid-layout (не в том случае, если вам нужно поддерживать старые браузеры, такие как IE 11 и ниже), чтобы реализовать несколько стилизованных компонентов. Я думаю, что комбинация scss и «flexbox» позволяет создать большинство компонентов просто и использовать их так, как вы хотите.

Я настоятельно рекомендую избегать использования библиотек и вместо этого писать собственный код. Потому что сила, которую мы будем иметь в то время, безгранична. Вы будете удивлены, получив это.

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