Add CSS architecture resources

content/roadmaps/100-frontend/content/108-css-architecture/102-smacss.md

@@ -1 +1,6 @@
-# Smacss
+# SMACSS
+
+SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://smacss.com/'>SMACSS Official Website</BadgeLink>

content/roadmaps/100-frontend/content/108-css-architecture/readme.md

@@ -1 +1,10 @@
-# Css architecture
+# CSS Architecture
+
+CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems. There are different ways of writing CSS that allows in writing more maintainable CSS.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.webfx.com/blog/web-design/css-methodologies/'>A Look at Some CSS Methodologies</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://en.bem.info'>BEM Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://oocss.org/'>OOCSS Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='http://smacss.com/'>SMACSS Official Website</BadgeLink>
+