I'm beginning CSS, HTML, and Sass, and while I understand the basics, I'd like to start getting into best practices. I'm building a responsive portfolio website (using Bones HTML5 Boilerplate & Wordpress), that will have 4-5 breakpoints, as well as ~5 different static site templates.
My breakpoints are imported based on media queries from code in multiple .scss files, like so:
_base_res.scss
_481_and_up.scss
_768_and_up.scss
_1030_and_up.scss
Right now, I also have a number of static pages that have media queries within them:
_home.scss
_about.scss
_contact.scss
_work.scss
Is it redundant to have the static page css files that contain media queries as well as breakpoint css files? Should I just have classes .home, .about, .contact, .work within the breakpoint scss files?
Sorry if my question is not clear.. if not, please let me know how I might be able to clarify.
Thanks
I would suggest reading into and about https://smacss.com/ this will teach you how to create good css architecture. Also I would recommend writing a mixin that will allow you to pass media query variables. Once that is done write out your media queries where you need them not on specific stylesheets.