Hi! I'm a Systems Designer at GitHub working on https://primer.style.
danielguillan / bem-constructor Goto Github PK
View Code? Open in Web Editor NEWA Sass library for building immutable and namespaced BEM CSS objects
License: MIT License
A Sass library for building immutable and namespaced BEM CSS objects
License: MIT License
Hi! I'm a Systems Designer at GitHub working on https://primer.style.
First, this library is awesome. Thank you so much for sharing it.
I wonder if you've run across the need to have an element that has already been declared elsewhere also appear within the block's hover, active, or focus state? Something that would compile to this, for example:
.o-burger {
texture: juicy;
}
.o-burger:hover {
.o-burger__cheese {
melty: true;
}
}
.o-burger__cheese {
type: gouda;
}
It doesn't appear possible with this library at the moment. Here's what I would try to get the above:
@include object('burger') {
texture: juicy;
&:hover {
@include element('cheese') {
melty: true;
}
}
@include element('cheese') {
type: gouda;
}
}
At the moment, I get a compiling error telling me that the cheese element has already been created.
I work on a project which recently migrated from node-sass to dart-sass for compilation and dart-sass doesn't like usage of !global
and so there are warnings that prop up for using bem-constructor as follows.
DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$_bem-log: null` at the top level.
╷
27 │ $_bem-log: () !global;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/sass-bem-constructor/dist/_sass-bem-constructor.scss 27:1 @import
src/client/scss/_import.scss 7:9 @import
stdin 1:9 root stylesheet
DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$_bem-current-context: null` at the top level.
╷
40 │ $_bem-current-context: () !global;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/sass-bem-constructor/dist/_sass-bem-constructor.scss 40:1 @import
src/client/scss/_import.scss 7:9 @import
stdin 1:9 root stylesheet
since the constructor is imported by every module as part of the base setup. This warning shows up twice per module in the project. ( so a looooottttt 🤕 ). Suggestions on fixing this would be welcome. I can submit an updated PR to replace them with null if that would solve the issue and make this repo in compliance with dart-sass.
Hi,
bem-constructor still appears to have some issues with libsass compatibility, like it did with #8 but with different errors.
Particularly, it appears to fail over the use of selector-append(&...)
. This appears to be a sass-script feature which isn't very clearly documented anywhere. Hence, my question isn't really whether we can fix this on the bem-constructor side of things, but rather, to document the intended behavior of that construct so we can do a proper bug-report on the libsass side of things.
Anyone who could clarify what this specific syntax is actually intended to do?
Thanks!
Hi, tnx for this lib.
Using node-sass 3.4.2, I have an issue; here's what my .sass file looks like:
@import "../bower_components/bem-constructor/dist/bem-constructor"
@include object('burger')
texture: juicy
@include element('tomato')
color: red
And throws this:
column: 13
line: 138
file: /Users/mirko/projects/workshop/rails/gulp-rails-pipeline/gulp/assets/bower_components/bem-constructor/dist/_bem-constructor.scss
status: 1
messageFormatted: gulp/assets/bower_components/bem-constructor/dist/_bem-constructor.scss
Error: One or more elements from `tomato` have already been created
on line 138 of gulp/assets/bower_components/bem-constructor/dist/_bem-constructor.scss
>> @error 'One or more elements from `#{inspect($elements)}` have alr
Tnx for your help.
Example:
@include block('some-block', 'object') {
@include modifier('some-modifier') {
@include modifies-element('some-element') { ... }
}
}
some-element
has not been created. Should we throw an error?
Harry Roberts explains how he uses class suffixes to denote different contexts: http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/#responsive-suffixes
I've been using responsive contexts in my objects for a long time but have been writing them as prefixes (e.g. .large-o-media
). Harry's syntax makes a lot more sense:
@
Example object with responsive suffix: .o-media@large
Should the BEM Constructor mixin handle this? How would the API look like?
We should be able to use is-
or has-
as needed.
.o-some-block.is-hidden { ... }
.o-some-block.has-children { ... }
Am I missing something, or does using using the BEM constructor make source maps pointless? Seems like everything just points back to the mixin rather than the spot where the mixin was called.
The hack namespace should be applied to the current constructed selector.
@include block('burger') {
@include modifier('veggie') {
@include element('extra-topping') {
@include hack() {
ingredient: bacon;
}
}
}
}
Current output:
._o-burger--veggie .o-burger__extra-topping { ingredient: bacon; }
Expected output:
.o-burger--veggie ._o-burger__extra-topping { ingredient: bacon; }
Hi Daniel,
thank you very much for your work on this lib, it’s a really neat implementation and I really dig its expressiveness. I currently just have one open question before I decide to use it for my next project.
What I currently don’t understand is why the modified-element mixin makes use of the immediate child selector > instead of the more general descendant one? This seems to make a strong assumption about the structure of the underlying markup and kind of prevents the arbitrary nesting of elements.
I guess you had your reasons for this decision and I'd appreciate if you could shed some light on this.
Best,
Sven
( ⚆ _ ⚆ )
Generate a single scss file from source
Hi,
I'm trying to get this work with grunt-sass but everytime I'm running the grunt-sass task I'm getting this error:
One or more elements from
green-element
have already been created
My test file:
@import "bem-constructor";
@include object('test') {
background: red;
@include element('green-element') {
background: green;
}
}
Did you ever run into that issue?
EDIT:
1.1.0
1.0.0
I just read the article about css namespacing on css wizardry and i love the idea of bem constructor but unfortunately it doesn't work with gulp-sass, it throws some errors like this one:
{ status: 1,
file: '../bower_components/bem-constructor/dist/_bem-constructor.scss',
line: 476,
column: 13,
message: 'error reading values after ',
code: 1 }
Even if i comment out line 476 it throws like 6-7 more errors. I think this isn't an issue with your library but it's probably node sass and gulp sass are still not updated to use some features that ruby sass has. Can this be fixed somehow?
This is a brilliant library, does anyone know if there is equivalent package for Less?
I was trying to use Sassdoc
along bem-constructor
but then I realized that Sassdoc
only works for certain Sass items (variables, functions, mixins and placeholders).
Thing is, most of the times (if not 100% of them) I find myself defining different blocks, objects or components by starting with the @include
operator, which is certainly not caught by Sassdoc
. That means all of my potential nice and clean documentation for that given block or component will just not be parsed and rendered by that tool.
I wonder if there is any chance to investigate on this, whether it is a way to integrate Sassdoc
or any other similar tool into your library, or come up with a built-in alternative to produce docs from the blocks created.
Thanks for your time, this is an awesome library.
Log when an element is modified by a parent block/state/hack/theme modifier and prevent possible duplication.
Thank you very much for your work on this very usefull project.
How can I make this CSS code in SASS with component
and modifficators
?
.c-offer .c-offer__image {}
.c-offer.c-offer--simple .c-offer__item {}
.c-offer.c-offer--simple .c-offer__name {}
.c-offer.c-offer--base {}
.c-offer.c-offer--base .c-offer__heading {}
.c-offer.c-offer--base .c-offer__description {}
.c-offer.c-offer--base .c-offer__description--bold {}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.