CSS Components and Architecture

Description #

As CSS matures we see it borrowing concepts from other programming languages. Developers have always had the goal of writing code that is predictable, reusable, and maintainable. Websites are becoming increasingly large and complex, and those goals are increasingly important.

Meeting those goals shows up in two important ways in CSS. First by applying some architecture to our CSS, second, by introducing the idea of webpages as a collection of re-useable components instead of a whole.

Where this knowledge is utilized #

• WDD 230
• WDD 330
• *WDD 331
• CSE 340

Prerequisites #

• Understanding of CSS
• It would also be helpful to have some knowledge of a CSS preprocessor like Sass.

Prepare #

• Read CSS Architecture Phillip Walton
• Study CSS Guidelines
• Read the introduction to BEM at Get BEM

Optional #

If you have access to Sitepoint the following is a great resource as well:

• Become the CSS Hero of Your Office with CSS Architecture. The whole course is good, but quite long (2h34m). Start with watching the first two lessons, then pick at least 2-3 parts from lesson 3 to watch.

Ponder #

• Design a simple component. A well built component should be easily re-usable, and should fit in well with the rest of the layout the component will be placed in. This requires a bit of thought as you plan out your components.