I almost completely switched to Sass in the past year. So organzing my CSS code has become a mission of mine :)
Structure is especially needed, when you are not the only one working on the design. So that everyone on the team can easily understand and contribute with ease. There are never too many files, as files get combined anyway.
Make your own life easier and for those you work with!
Currently applying the following structure on newer projects:
sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _images.scss # Images | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # etc… | |– utils/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _utils.scss # Class & placeholders helpers | ... # etc… | |– layout/ | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | ... # etc… | |– sections/ | |– _home.scss # Home specific styles | |– _about_us.scss # About us specific styles | ... # etc… | |– themes/ | |– _front_base.scss # Parent theme | |– _front_child.scss # Child theme | |– _admin.scss # Admin theme | ... # etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _bourbon.scss # Bourbon Mixins | ... # etc… | | `– app.scss # primary Sass file
Which architecture fits your project & team will vary.
BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More
THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More
2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More
Short look back at 2023 This has been a busy and interesting year. I am… Read More
Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More
Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More