The imports is just a way of keeping code concise and separated into like pieces (modular). You’ll see this a lot with CMS themes, projects using CSS preprocessers, and CSS libraries (like bootstrap). I don’t think there are any articles particular to HubSpot’s file structure but you can find a lot on SCSS/SASS file structures which I think can be helpful in understanding setups like this.
The macros.css specifically is for HubL macros used to mutate theme settings data and create reusable pieces of CSS. It may seem unecessary to have it separated since there’s only one macro in there in the boilerplate but developers are likely to add more. I, myself, use at least 7 different macros in most of my projects.
Keep in mind though, you don’t have to follow the boilerplate setup to a T. You can write your CSS however you like.