15 takeaways from cssconfeu 2015 that you can use today

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.

.div-over-img {
    background-color: #2f3138;
    background-blend-mode: lighten;
}

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">

HTML[lang="no"] q {
Quotes: '«' '»';
}

@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:

@supports(flex-wrap:wrap){
// instead of modernizr
}

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.

Tired of minified files when you search through your project?

Are you also tired of having your minified versions of CSS and JavaScript showing up when you are searching through your project?

It turns out there is an easy way to fix this if your are using SublimeText. Just go to Preferences => Settings – User and add this to your configuration-file:

"file_exclude_patterns": [
    "*-ck.js", 
    "*min.js", 
    "*.css"
  ]

I have added *-ck.js because that's the default output from CodeKit for minified files. I've also added all CSS files since I just want to search through my SCSS.

Todos in SCSS

You can write todos to yourself in your scss by adding this line where you need to remind yourself of something:

@warn "Add breakpoint here";

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:

How warnings and debug-notifications look in CodeKit — This is how warnings and debug-notifications look in CodeKit

When to use svg attributes

Are you inlining your svg in HTML5? Just use<svg></svg> tags without attributes.

Are you linking the SVG as an image, background-image or importing it another way that causes the User Agent to use an XML parser? Then you need the xmlns attributes like so:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`

How to use modifiers on modifiers with BEM?

For the last few project I’ve had the pleasure of naming my SCSS-files with the BEM methodology. The upside is easier maintainable files and far more informative class-names.

The BEM syntax is very strict and the naming convention follows this pattern:

.block {}
.block__element {}
.block--modifier {}

If you haven’t used BEM or haven’t got your head around BEM yet I highly recommend this article by Harry Roberts.

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:

<a href="#" class="button button--primary">Main attention</a>
    <a href="#" class="button button--secondary">Cancel</a>

..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?

How the buttons looks on a red background

A few solutions comes to mind:

.button--secondary--inverted

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.
.button--secondary-inverted

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.
.button--inverted

We create a .button--inverted class that changes .button--primary and .button--secondary if they have the .button--inverted class. Ex:
```
.button--inverted {
    &.button--primary {
        color: black;
        background-color: white;
    }
    &.button--secondary {
        color: white;
        border-color: white;
    }
}
```
This solution is a bit inconsistent with the BEM naming since we are using nesting. However the HTML is very nice to read and easy to remember. It also means that we can easily toggle the .button--inverted class with javascript without having to worry about if this class later on is going to be a .button--primary or a .button--secondary – the invertion will still work.
.box--notification .button--secondary

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.

Older Newer

Hauken

15 takeaways from cssconfeu 2015 that you can use today

Tired of minified files when you search through your project?

Todos in SCSS

When to use svg attributes

How to use modifiers on modifiers with BEM?

.button--secondary--inverted

.button--secondary-inverted

.button--inverted

.box--notification .button--secondary