Added a section on “Component structure”

_includes/snippets/architecture/06/cz.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

_includes/snippets/architecture/06/da.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

_includes/snippets/architecture/06/de.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

_includes/snippets/architecture/06/en.html

@@ -1,4 +1,3 @@
-
 <div class="code-block">
   <div class="code-block__wrapper" data-syntax="scss">
 {% highlight scss %}

_includes/snippets/architecture/06/es.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

_includes/snippets/architecture/06/fr.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

_includes/snippets/architecture/06/index.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/{{ page.language }}.html %}

_includes/snippets/architecture/06/ko.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

_includes/snippets/architecture/06/pl.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

_includes/snippets/architecture/06/pt.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

_includes/snippets/architecture/06/zh.html

@@ -0,0 +1 @@
+{% include snippets/architecture/06/en.html %}

en/_architecture.md

@@ -34,6 +34,26 @@ For instance, a search form should be treated as a component. It should be reusa
 
 Most of any interface can be thought of as little components and I highly recommend you stick to this paradigm. This will not only shorten the amount of CSS needed for the whole project, but also happens to be much easier to maintain than a chaotic mess where everything is flustered.
 
+## Component Structure
+
+Ideally, components should exist in their own Sass partial (within the `components/` folder, as is described in the [7-1 pattern](#the-7-1-pattern)), such as `components/_button.scss`. The styles described in each component file should only be concerned with:
+
+* the style of the component itself;
+* the style of the component’s variants, modifiers, and/or states;
+* the styles of the component’s descendents (i.e. children), if necessary.
+
+If you want your components to be able to be themed externally (e.g. from a theme inside the `themes/` folder), limit the declarations to only structural styles, such as dimensions (width/height), padding, margins, alignment, etc. Exclude styles such as colors, shadows, font rules, background rules, etc.
+
+A component partial can include component-specific variables, placeholders, and even mixins and functions. Keep in mind, though, that you should avoid referencing (i.e. `@import`-ing) component files from other component files, as this can make your project’s dependency graph an unmaintainable tangled mess.
+
+Here is an example of a button component partial:
+
+{% include snippets/architecture/06/index.html %}
+
+<div class="note">
+  <p>Thanks to <a href="https://twitter.com/davidkpiano">David Khourshid</a> for his help and expertise on this section.</p>
+</div>
+
 ## The 7-1 pattern
 
 Back to architecture, shall we? I usually go with what I call the *7-1 pattern*: 7 folders, 1 file. Basically, you have all your partials stuffed into 7 different folders, and a single file at the root level (usually named `main.scss`) which imports them all to be compiled into a CSS stylesheet.