Code Corps SASS Ideas and Dicussion

This discussion is related to and goes beyond what's described on issues #672 and #698.

I'd like that by the end of the CSS Refactoring Milestone we achieve not only the decoupling of styles and testing, proper BEM naming of classes and semantic HTML but also a rearranged folder structure for /app/styles. All of this while making the most out of SASS's built-in features.

1. Topics Covered

1.1 Architecture

The main idea here is to reorganize our /app/styles folder structure to follow the the 7-1 pattern (or as close as we can get to it). With this new approach the folder structure would look something like this:

|- styles/
|-|- abstracts/
|-|-|- _functions.scss
|-|-|- _mixins.scss
|-|-|- _variables.scss
|-|- base/
|-|-|- _base.scss (standard styles for HTML elements)
|-|-|- _fonts.scss
|-|-|- _helpers.scss (e.g. .clearfix, .container, etc.)
|-|-|- _typography.scss
|-|- components/
|-|-|- categories-list.scss
|-|-|- category-item.scss
|-|-|- ...
|-|- layout/
|-|-|- _footer.scss
|-|-|- _header.scss
|-|-|- ...
|-|- templates/
|-|-|- about.scss
|-|-|- home.scss
|-|-|- projects.scss
|-|-|- team.scss
|-|-|- ...
|-|- themes/
|-|-|- code-corps/
|-|-|-|- code-corps.scss
|-|-|- another-theme/
|-|-|-|- another-theme.scss
|-|-|-|- ...
|-|app.scss
|-|main.scss

1.1.1 References

• A Vision for Our Sass
• Meaningful CSS: Style Like You Mean It
• Sass Boilerplate

1.2 Typography

1.2.1 References

• Neat
• Sassline

1.3 Color Palettes

1.3.1 References

• Dealing with Color Schemes in Sass
• Using Sass to Build Color Palettes

1.4 Themes

1.4.1 References

• How to Use Sass to Build One Project With Multiple Themes
• Themed Styles with Sass
• Sass Theming with Configuration Files
• Sass Theming: The Neverending Story
• Efficient theming with Sass

1.5 Media Queries

1.5.1 References

• Breakpoint

1.6 Guidelines and Documentation

1.6.1 References

• SassDoc
• Sass Guidelines
• stylelint
• EditorConfig
• Atom EditorConfig
• Bourbon
• When to use @extend; when to use a mixin
• Sass Placeholders
• Dealing with Constants in Sass
• Using Sass Maps
• Understanding Sass Lists
• Magic Number in CSS
• All You Ever Need to Know About Sass Interpolation

1.7 Style Guide

1.7.1 References

• SC5 Style Guide Generator
• Style-guide the smaller things

2. Exploratory

2.1 CSS Modules

2.1.1 References

• CSS Modules

2.2 Shadow DOM

2.2.1 References

• Shadow DOM v1: Self-Contained Web Components