Tailwind versus BEM
The linked article compares two approaches for writing CSS:
- A component library (like BEM)
- Utility classes (like Tailwind)
It's good to know the pros and cons of each approach. Although we default to BEM, you might encounter a utility approach in a client project.
Related cards:
An auto-mapper for ARIA labels and BEM classes in Cucumber selectors
Spreewald comes with a selector_for
helper that matches an English term like the user's profile
into a CSS selector. This is useful for steps that refer to a particular section of the page, like the fol...
An auto-mapper for BEM classes in Cucumber selectors
When you are using the #selector_for
helper in Cucumber steps, as e.g. Spreewald does, the following snippet will save you typing. It recognizes a prose BEM-style selector and maps it to the corresponding...
BEM naming conventions
We structure our CSS using the BEM pattern.
Our naming convention for blocks, elements and modifiers has evolved over the years. This card shows our current sty...
A collection of useful design resources for developers
This collection contains some useful design resources for developers. Many of them were mentioned in the Refactoring UI tutorials.
Tutorials
- Refactoring UI Videos
- [Refactori...
Organize large I18n dictionary files in Ruby on Rails
If you're suffering from a huge de.yml
or similiar file, cry no more. Rails lets you freely organize your dictionary files in config/locales
.
My organization works like this:
-
config/locales/rails.de.yml
modified [Rails boilerplate](http...
CSS-Style
Richard Powell presents a collection of CSS styling advice that's mainly taken from SMACSS. Although at makandra we're using BEM instead of SMACSS, here's my favorites.
Do not use ID's in CSS Selectors
It is never sa...
Simple Naming for Modular CSS Class Names ยทยทยท Nico Hagenburger
An opinion how to implement BEM. I don't agree with all of Nico's choices, but I applaud his approach to compile a simple and short list of rules.
Multiline comments in indented Sass syntax
Write a //
and indent every subsequent line by two spaces.
This is great for documenting BEM blocks!
//
An action button
================
Basic usage
-----------
<a href="/path" class="action">New booking</a>
...
Versatile Cucumber step regarding hovering above elements
Here's a pretty useful steps that hasn't made it into Spreewald yet.
It is best used with the [auto-mapper for BEM classes](https://makandracards.com/makandra/31145-an-auto-mapper-for-bem-classes-in-cucumber-sel...
Improving browser rendering performance
As the web is being used for more and more tasks, expectations rise. Not only should web pages offer rich interaction, they must be responsive in both size and interaction.
This imposes a paradoxon that needs to be solved by building performing a...