Difference Between Modules and Components with Consideration of Digital Development and UI Design  (HTML/CSS/JS)

Quick Answer:

  • Modules as independent units made up of components: Header, Footer, Sections, Articles, Aside, etc. A house is made up of many rooms, all with special styles and functions to create an independent whole.
  • Components as a group of reusable code containing more than one element: Unordered Lists, Quotes, Cards, Tables, etc.

Example CSS style guide:

/* Style Guide – Mobile First
1. =Setup
2. =Modules as independent units made up of components
3. =Components as group of reusable code containing more than one element
4. =Classes
5. =Responsive as enhancement
*/

Explanation:

I love what I do because it requires drive, constant persistence, and being okay knowing I’ll never learn it all.  

  • Constantly changes – fulfills my inherent need of progression.
  • Logical – the base of what I get to create is objective. Call it accessibility even. It is the factual core and counter balance of emotion, ego, and “make the logo bigger” (the best). It is as pointless to argue with a computer, as much as it is a human. Still fun though.
  • Centers around communication – Most people I know communicate more effectively via email than they do via phone. And what I get to do requires communicating complex instructions to a non-human in order to communicate via computer to another human. Have to love a buffer. See also: giant satellite on my right forearm featuring a massive crank because Rodney Raines is a beautiful human. 
  • Inspires creativity – daily, constant reminders of smarter people doing better stuff.
  • Sets nonverbal, internal goals – I love a challange. I once chased after a girl for 3 weeks sending questionable texts to the wrong number – given to me intentionally by the same girl. Turned out to marry her after 10 years of dating. If I had communicated half of the goals that get set doing this sort of work, that would likely not have been the case. Don’t talk about it, they’ll find you out.

The point of that long intro is a lesson in rationale. Why you want to know the difference is just as important as knowing the difference, if your goal is to benefit from learning it.

Like most of my long-winded posts, this was inspired from an old question I answered on Stack Overflow, simply titled “Module vs. component design”. The rabbit hole quickly opened and the answers presented were as vague as the initial question asked. Nothing wrong with it, but a question that open deserves all sorts of answers – especially a simple one. You can read the thread here.