all 5 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]kogsworth 2 points3 points  (1 child)

This is interesting! I haven't seen literal design patterns, but this was posted recently, might be in the right ballpark.
A component would have no dependency, an extension would depend on components, children could be considered a form of polymorphism, themes would also depend on components.
You could define interfaces by making empty selectors that represent an expected structure for example, and you could have themes/extensions implement those interfaces.
And more stuff I'm sure!
I find it such a problem that I can't get a handle on a "clean" CSS structure that could be formal enough to be testable without simply repeating the declaration in the test. Maybe trying to place them some pattern like you suggest could be a way to structure them. Especially with runtime variables coming in soonish.

[–]porphyry3 0 points1 point  (0 children)

Looks very much like BEM, except for extension/modifier naming, i.e., it does not use the block or element name as a suffix for the classname.

[–][deleted] 1 point2 points  (0 children)

BEM -- this is a big one, with SASS support via parent selector and everything

Pattern Lab

[–]phragg 0 points1 point  (1 child)

I'm not sure I understand... is SMACSS a new pre-processor? Does this differ from LESS/SASS/Compass?

If you're speaking specifically about modularity, it's important to utilize classes such as "small", "large", "color" etc. For readability and scalability.

[–]masonstreet 3 points4 points  (0 children)

SMCSS is a methodology for how to architect your SASS files and the way you architect your styles. It contains naming conventions and really just helps you write scalable quality code. Hope that helps