You can use fill: currentColor as a property in your svg-icons. That way they’ll inherit the color property of their parent. Especially useful for inline-icons.
Blend modes could get really useful for making a consistent image-style across images for clients that don’t have much photography-experience. Much like an instagram-filter. You could for example do like this to get a more washed out dark color on an image.
For performance you can use a black/white image with a colored gradient with blend-mode on top to make a nice effect.
By always writing just 0 instead of 0px, 0em or similar, Facebooks saves a lot of energy (and I guess money). This is something a preprocessor should do, but a nice reminder non the less. Facebook also detects which browser you are browsing from and sends just the correct browser-prefix for each browser.
You can save yourself a lot of trouble by using background-images instead of the <img> tag in certain situations. The <img> tag is nice to have as a fallback, but hidden via CSS.
You can use max-width: max-content; to specify the size of a figure element where you want the width of the figure to be defined by image-width.
You can specify language in HTML with the lang-tag and target this with CSS to get quotes-marks for different languages.
Eks: <HTML lang="no">
@media: print has support for orphans and widows with the syntax orphans: 3; and widows:3;. It is sadly not supported in regular CSS, but I guess it will come. Would be especially handy if we could use this on layout-elements.
Flexbox can be used as a kind of element-query. You can use it to break up blocks when there isn’t enough space instead of @media-queries.
Margin(left|right|top|bottom): auto; is used a lot for calculating distances in flexbox.
Flex overwrites width and float, so they can be used as fallbacks.
To get an evenly distributed spacing between menu-elements add display: inline-block; to the li and display: flex; and justify-content: space-between; on the ul.
You should think of flexbox as an addition. First do as you normally would, then add the extra perfection in form of flexbox.
As a fallback for browsers that don’t support flexbox you can use modernizr or wrap you flexbox-code in this:
order is used to specify the order of the elements when they break to smaller sizes. Default is 0, but you could also use minus-values.
You can write todos to yourself in your scss by adding this line where you need to remind yourself of something:
This way you get a nice warning each time you compile, listing out all your warnings. You could also use @debug instead of @warn. The difference is basically that you can turn warnings off with the --quiet command-line option or the :quiet Sass option, and that the warnings look a bit different:
Usually it’s rather easy to tell if you are making a block, an element or a modifier, but one problem I’ve had again and again is a modifier on a modifier. Take this example:
We have these two buttons called .button--primary and .button--secondary coded like this:
..and looking like this:
This works great on the regular background, but as you can see we got a problem if we need to wrap the buttons in a red warning-box or similar. We still want the same look, but maybe not green on red?
A few solutions comes to mind:
We could add a modifier to .button--secondary. This just overrides the values that we need to change and we still need to add .button--secondary to the button. This feels a bit wrong and is very tiresome to write out. The code is however very logic to read and builds nicely on the BEM syntax.
We make a seperate modifier which is almost a duplicate of .button--secondary, just changing the colors that we need to change. This is also very nice to read, but feels very bloated since you are copying almost every style.
We create a .button--inverted class that changes .button--primary and .button--secondary if they have the .button--inverted class. Ex:
We could also nest the styling and say if .button--secondary is inside .box--notification we always want it to be white. This is probably the most dirty way to do it, but why not when you never want a green button inside a red box? The downside here is reusability and the location of the code. The big upside of BEM is the structure and that we from the name know the location of every class. If we suddenly start to nest classes we miss control.
I’m still not sure what is the best solution here. For now I’ve landed on alternative 3 mainly because the simplicity and readability. I’m eager to hear your thoughts and ideas. Give me a word on twitter or on mail about your thoughts.