In-somecontext Sass Partials

I stirred up some discussions the other day with a Twitter poll about :

.some-context .thing { /* special rules and overrides */ } Does that go in thing.css or some-context.css?

— Dave Rupert (@davatron5000) February 7, 2017

Of course everyone said “BEM does this”, except when you can’t control the classnames, which I can’t. The tweet also got some great responses and blog posts from CSS people I admire, who diverged from the poll.

Great posts from people who really think about good CSS architecture. These discussions inspired me to try something I’ve never done before with Sass partials and I’m currently enjoying the first fruits of this approach.

I’m working on a project where I’m redesigning a complex ecommerce organism that can appear within various contexts. Rather than littering .somecontext > .thing
overrides throughout my .thing
partials, I created an _in-somecontext.scss
partial that contains all my custom overrides. My _thing.scss
looks like this:

// Responsive Choreography, Grids, Etc
@import 'thing/layout';           

// Subcomponents
@import 'thing/header';
@import 'thing/preview';
@import 'thing/details';

// Contexts
@import 'thing/in-somecontext';

Inside _in-somecontext.scss
looks something like this:

.somecontext {
    .thing-header {
        position:sticky;
    }
    .thing-preview {
        display: none;
    }
    .thing-details {
        font-size: 0.925rem;
    }
}

In addition to separating concerns, it’s also really extensible to bundle these together. A new context? That’s just a new partial. If a context disappears, I can delete a single file. That’s great and feels true to the Single Responsibility Principle
.

This hasn’t made it to production yet, so it’s possible it’ll change but I like the organization quite a bit.

稿源:daverupert.com (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动互联 » In-somecontext Sass Partials

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录