Fluid responsive design methodology

List of components used by Block editor (names!).

If you work in the front-end, you've probably heard a lot about TailwindCSS, a CSS library, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach - it is all "utility classes".

And I am not a fan. I got a whiff of it and quickly learned the name is appropos: it was as welcome and useful as passed gas.

A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

• interesting use of [, ], and | inside class attribute

Have you ever wondered what balls are similar in size? Which ones are larger or smaller than others?

In this story I want to broaden the focus and give you a more detailed view on the way we use BEM naming conventions together with some tooling in our React projects.

A few months ago I started using Alpha, Beta, Gamma naming convention for variables or elements. It began as a temporary thing, but it stuck eventually, and now I am using it all the time.

Modern CSS: Writing Better, Cleaner, More Scalable Code

Ignis is a Sass library that I developed to create websites. Its main feature is a BEM system, though it also includes some other useful features:

Easing background gradients
Context stacks: A temporary data storage
Property trees: A persistent data storage
Responsive properties: A generalization of responsive typography
Modular scales

Не ещё одна методология, не новая библиотека, не «серебряная пуля». Нужен ли нам БЭМ и какие есть альтернативы? Сколько нужно разработчиков, чтобы «наделать делов» и кто в этом виноват?

A set of directives to simplify your workflow with BEM-markup in Angular applications.

Define and expose self-contained UI patterns as Drupal plugins and use them seamlessly as drop-in templates for panels, field groups, views, Display Suite view modes and field templates.

"The HTML of a modern app is mostly a div soup. CSS by itself does not offer any structured model at all. High-level JavaScript components use abstractions that are not consistently tied to styles or markup. At the UX level, interfaces are described in terms that have nothing in common with technical implementations. Enter BEM, a unified semantic model for markup, styles, code and UX. "
"Not all blocks have elements."
"One DOM node may host several blocks. A node may be an element within one block and (at the same time) a container for another block."
"Once the designer is familiar with BEM’s terms, they can iterate towards designing blocks and elements, instead of “screens.” This will also help them to identify similar UI parts and unify them."

Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different naming convention to BEM, but an augmentation: small additions that level BEM up a notch. This extended BEM syntax has been dubbed BEMIT, as it borrows some paradigms and patterns from the (as yet unpublished) Inverted Triangle CSS architecture. BEM + ITCSS = BEMIT.

When we work at scale, we often find that we spend a large amount of our time reading, maintaining, and refactoring existing code, rather than writing and adding new features. This is the reason we focus so much on things like architectures, naming conventions, methodologies, preprocessors, scalability, etc.: because writing CSS is easy; looking after it is not.

Managing CSS at scale is hard; and a lot harder than it should be. ITCSS is a simple, effective, and as-yet unpublished methodology to help manage, maintain, and scale CSS projects of all sizes.
In this talk we’ll take a sneak peek at what ITCSS is and how it works to tame and control UI code as it grows.

certainlyakey starred HugoGiraudel/sass-boilerplate

certainlyakey starred CSSSR/csssr-project-template

Back to architecture, shall we? I usually go with what I call the 7-1 pattern: 7 folders, 1 file. Basically, you have all your partials stuffed into 7 different folders, and a single file at the root level (usually named main.scss) which imports them all to be compiled into a CSS stylesheet.
base/ - resets and basic typography
components/ (or blocks/) - components with their separate mixins, images, variables, (also possibly scripts and markup)
layout/ - structural styling for main elements (asides, mains, headers etc.)
pages/ - styles specific to certain pages
themes/ - if site contains several color/typography themes - put here styling that should vary according to different themes
abstracts/ - common vars, functions, mixins, extends
vendors/ - external scripts or frameworks specific styling (jq-ui etc.)