Converting the whole site to the new layout (section vs .section)


@h30 I noticed on the pages you’ve updated to the new design, you’ve set the margins by wrapping everything in a <section> tag. The projects page uses the same method, but its tag is <.section>.

I’d like to standardize on one so I can move the relevant css rules to _content.sass so we won’t have to duplicate the grid mixins for every page. Do you have a preference for which one to use?

@iko may also have opinions on this.


<section> is arguably more semantic than <div .section> (which <.section> is short for). I think the benefit of semantic HTML is mainly improved accessibility, but I don’t know if there is a practical difference in accessibility in this case.


Will we want <section>s that don’t follow the normal grid constraints? If so, would it make sense to do something like <section .main>? Or just override those specific sections?


Using a class might be more consistent with our BEM inspired style. And avoiding overrides makes for rules that are easier to understand and modify in my opinion. It’s not too important though, since we could make that change when we actually have a page with multiple sections.


Preferably a class for better encapsulation, and it can be (re-)named to be more descriptive. Applying style to an element selector may lead to unintended cascading later when more declarations are tagged on.