Comments (3)
This method also seems to reintroduce a CSS specificity battle that (I think) BEM tries to avoid.
BEM and SUIT are pretty much the same thing just with different naming convention. SUIT is also backed by tools and a better (imho) formalized methodology.
I wonder how I might avoid this situation? Should the ContentList-item elements be their own standalone block? Or maybe I should use an element modifier instead (ContentList-item--small)?
I think that the former might work better. Not sure if you are familiar with React but when in doubt I ask to myself: "how would I do that with React components". In this case the answer is similar to your solution I guess:
<ContentList>
<ContentListItem small />
</ContentList>
from suit.
Or just use a margin utility to tweak the css as needed. Margin utility examples here - see test 4
from suit.
@rmunch Since you have limited flexibility, I would resort to making the items their own component. In this example I used the shared namespace, but that doesn't matter. What matters is that the styles don't leak in this example.
<div class="ContentList">
<div class="ContentListItem ContentListItem--large">Content 1</div>
<div class="ContentListItem ContentListItem--large">Content 2</div>
<div class="ContentListItem ContentListItem--large">
<div class="ContentList">
<div class="ContentListItem">Small content 1</div>
<div class="ContentListItem">Small content 2</div>
</div>
</div>
</div>
.ContentListItem {
margin-bottom: 10px;
}
.ContentListItem--large {
margin-bottom: 30px;
}
I also created a third-party SUIT CSS utilities package for quickly adding space around objects.
from suit.
Related Issues (20)
- Animations HOT 2
- Styles for export - best way to override compoents and/or their modifiers HOT 7
- * Span in Radicar
- What lock files we should keep? HOT 11
- Update naming of variables to comply with new conventions HOT 3
- What's next for suitcss? HOT 19
- Monorepo HOT 25
- How about A Chinese documentation? HOT 1
- Remove Component(1) Installation Reference HOT 2
- Upgrade to Node 6 HOT 2
- When using glob @imports, `postcss-reporter` incorrectly reports stylelint errors HOT 4
- Webpack HOT 4
- How to add --xl-viewport HOT 3
- Kill preprocessor HOT 2
- Consider dropping IE10/11 support? HOT 1
- Theming
- Any alternative to html-inspector?
- Nice - I'll send a pull request. Thanks. HOT 3
- What's the difference between a modifier and a state? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from suit.