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...
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...
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;...
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....
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;...
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; }...
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%; }...
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,...
Use the semantic elements. Your example is exactly how you should do it.
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....
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...
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...