csssmacss

using smacss is it recommended that modules never set margins but let this be handled by layout/containers?


I'm rereading smacss (Scalable and Modular Architecture for CSS)[https://smacss.com/] and most of the stuff makes sense to me.

One of the primary things is that a Module doesn't need to know anything of it's context/ surroundings. I.e.: it just renders it's contents but doesn't care if it's contained in a sidebar or main content area. So far so good.

Would this extend to the general rule that Modules should never define margins themselves but always let their parents (which would be layouts in smacss parlance) decide if/how to set them?


Solution

  • I would agree with Evgeniy in that sometimes margins would be module specific if they were compulsory in order to present the module's shadow style correctly for example.

    But I'd offer a friendly disagreement in most other cases, and say that the margin - essentially the spacing between modules or layout edges - should exclusively reside with the layouts.

    Bottom line with SMACSS, is that modules should be able to be inserted into any layout container and potentially fill the entire space of that layout (no width/height rules on module) and without any unexpected spacing between the layout edges. In other words, the layout determines the dimensions and positioning of the child module.

    It depends on the specific problem in question, but if for example you had multiple modules to reside inside a layout, and there was a need for spacing between them, then the layout div/sub-divs would need to specify those layout sub-columns for example, so that regardless of which modules are inserted into the columns, they all adopt the required layout in-between spacing.

    Finally, I'm afraid I wouldn't agree with the sub-module suggestion either, e.g. "module-name-top-gap". This would be anti-SMACSS because you would be heading in a direction whereby you are naming modules based on specific individual styles (e.g. the base module, except with margin-top: 20px), which isn't far off inline styles. The idea is to get away from that relationship, and name modules and sub-modules based on their inner makeup and purpose only, and let the layouts decide the rest.

    I'd recommend Jonathan Snook's new course on SMACSS available at Front-end Masters: https://frontendmasters.com/courses/smacss. I've watched it all and it goes into far more detail than he did in the original book, that massively helps with hesitations like these that I remember having too.