FHS StudClique Styleguide

This project uses BEM (Block‑Element‑Modifier) for the bulk of its component styling, while selectively adding small utility classes for very specific, repeatable tweaks. The BEM methodology is employed to give each visual component a clear, hierarchical structure: a block represents a standalone component, an element is a child that only exists within its block, and a modifier indicates a state or variant of the block or one of its elements. By sticking to this naming convention, the CSS remains modular, prevents naming collisions, and makes it straightforward to reuse components across different parts of the site with varying visual or functional states. It is also something new for us and a great learning opportunity.

Utility classes are reserved for tiny, global styling adjustments that would otherwise need to be duplicated across multiple BEM blocks. These include font weight adjustments and heading sizes. Because they are global, they can be applied to any element regardless of its block context, avoiding redundant rules for simple tweaks. These utilities are specific and they serve purely as one‑off styling helpers. This ensures utilities address isolated visual needs that span the across several blocks.

The CSS follows the concentric‑css approach, arranging properties into nested functional layers. First comes placement (display, position, float, and clear) defining how the element sits in the flow. Next is visibility (visibility, opacity, z‑index) controlling whether the element is seen. Then the box‑model layers (margin, outline, border, background, padding) set the element’s envelope. After that come content dimensions (width, height, overflow) determining the actual size and scroll behavior. Finally typography (color, text, font) controls the element’s text appearance. This ordered, concentric structure keeps rules predictable, improves readability, and makes diffs cleaner.