css transform() center positioning of a popup window issue
html5,css3,css-position,transform,bem
Well, this is indeed a nice solution as it doesn't require you to know the width and height of positioning container. If you knew them you could just replace transform with apropriate negative margins: margin-left: -90px; // half of the popup width margin-top: -45px; // half of the popup height...
Naming A Wrapper Element Class When Using BEM
css,naming-conventions,wrapper,nesting,bem
The way i've always treated it is the wrapper should always be the block so: <div class="PageFooter"> <footer class="PageFooter-inner"> <h4 class="PageFooter-brand">...</h4> <ul class="PageFooter-contactDetails">...</ul> </footer> </div> The Block contains Elements so instead of having something around my Block i just followed along with the Element principle and started using inner's instead...
How to modify multiple elements of a block with BEM CSS
css,block,element,modifier,bem
The philosophy of BEM is about to keep blocks context free. The low specificity is just a good practice, not a golden rule. I give three valid solutions below. If you're sure the block cannot be recursively included in itself, a simple cascade can be used: .block--active { background-color: green;...
Validate less with gulp including BEM
If postprocessors like https://github.com/necolas/postcss-bem-linter won't work for you for some reason. You can write your own, or possible create a Less Plugin. Less plugin can be visitors or postprocess, which can be used by you. E.g. classes need to start with c-, u- or o-, other classes are not permitted....
BEM CSS with common styles
I feel like i'm violating some rule of encapsulated block styling. Indeed. Button should be a block, not an element. Blue and Hollow are modifiers. With the Block__Element--Modifier syntax, your code should be: .Button { background-color: #CCC; } .Button--Blue { background-color: #00F; color: #FFF; } .Button--BlueHollow { background-color: none;...
SASS BEM extends
In order to mimic the second output you will need to use the following declaration .button { @extend %button; &__call, &__call--full { box-shadow: 0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2); padding:5px 30px; position: relative; } &__call--full { background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary; }...
How do I do this with BEM?
For example, make a block .primary-nav with three elements .primary-nav__ul, .primary-nav__li, .primary-nav__a. .primary-nav { &__ul { border-top: 2px solid $darkgreen; display: block; margin:10px 0 0 0; padding: 25px 0 0 0; } &__li { background-color: #004f5a; display: inline-block; float: none; margin-left: 0; padding: 5px 0; text-align: center; width: 100%; }...
File-level less variables
I'm not sure why you have to use the same variable name twice? You code does not compile: you code: // file a.less @block: ~".widget-a"; @{block}: { // styles for widget-a } should be: // file a.less @block: ~".widget-a"; @{block} { // styles for widget-a } can be rewritten to,...
Using HTML5 Semantic Elements with BEM Methodology [closed]
Use the semantic elements. Your example is exactly how you should do it.
BEM. Block with modifier elements naming
Elements always have a prefix of the block's name itself (not block with modifier). So .client__medical-specialty {...} .client__hospital {...} is the best way to go....
The differences between BEM and SUIT CSS naming conventions [closed]
css,naming-conventions,bem,suit-css
According to bem.info (source): We use hyphen to separate words in long names […] and two underscores to separate the name of the block form the name of the element […] But you can use any other separators for it. So, it's possible to use BEM with another syntax. The...
confusion with Nested Bem classes
Not really. You are right that you should separate out your blocks from your elements with a __ but once you've done that you shouldn't then be using __ again in the same class. If you need to use more than one word then use a single hyphen, for example...