This content originally appeared on DEV Community and was authored by Romain Guillemot
A "razor" in philosophy is a methodological principle that helps simplify complex choices by eliminating unnecessary hypotheses or options.
The most famous one is Occam's Razor, which advises not to multiply entities or hypotheses beyond necessity: choose the simplest explanation that works.
Applied to CSS, this idea would suggest streamlining our style property choices to design pages in a simple and effective manner, adopting techniques that solve layout problems without unnecessary complexity.
To apply the philosophical razor to CSS, it's about choosing the simplest and most effective solutions to solve layout problems, without overloading the code with unnecessary rules. Here's how you can structure your CSS property choices efficiently, adopting a progressive approach to maintain simplicity while handling complex layout requirements:
Prioritize the Normal Flow
The normal flow is the natural way HTML elements are arranged on the page without any specific intervention. It is the simplest foundation and should be your starting point for building a layout.
-
Blocks: Block-level elements (such as
<section>,<p>,<h1>, etc.) stack vertically, taking up the full available width. -
Inline: Inline elements (such as
<strong>,<a>) line up next to each other, following the horizontal flow of text.
Always start by seeing if the basic layout can be accomplished simply by working with these natural behaviors. For example:
- Adjust dimensions using
max-widthormax-heightfor containers or images only after the content is in place. - Use typography properties (
font-size,line-height, etc.) to organize content.
Switch to Flexbox or Grid When Necessary
When the normal flow isn’t enough, Flexbox and CSS Grid are powerful tools for handling more complex layouts. Use them thoughtfully, avoiding unnecessary complexity in the structure:
-
Flexbox is ideal for one-dimensional layouts (either a row or a column):
- For instance, to center an element both horizontally and vertically within a container,
display: flexandjustify-content: center; align-items: center;will suffice. - Flexbox excels at simple layouts where the relationship between elements is linear (e.g., navigation bars, aligned cards, etc.).
- For instance, to center an element both horizontally and vertically within a container,
-
CSS Grid is better suited for two-dimensional layouts (arranging elements in rows and columns):
- Use Grid for more complex layouts, like image galleries or data tables.
- Grid is more powerful than Flexbox for layouts where you need to control both rows and columns simultaneously.
The idea is to introduce Flexbox or Grid only when you reach the limits of the normal flow, avoiding applying them everywhere without real need.
For more details, check out these excellent guides by Josh Comeau:
Handle Spacing with padding and margin
To organize the spaces between elements, it's essential to understand the differences between padding and margin and to apply these properties methodically:
Padding: Manages the space inside the element, between its content and its border. Use
paddingto add space between internal content and the edge of a container, like in a button or card.Margin: Manages the space outside the element, between the element’s border and the surrounding elements. Use
marginto space elements apart from one another within the flow.
In general, use padding for internal space and margin for external space. It’s often clearer to use margin to control spacing between independent elements and reserve padding for adjusting space inside container elements.
See this article by Nathan Curtis for visual proof: Space in Design Systems.
Use position Values for Layering
Positioning in CSS allows for more dynamic layouts, but it’s important to avoid overusing them. Here's how to choose between the different position values:
position: static(default): Elements are positioned based on the normal flow.position: relative: The element stays in the normal flow but can be offset from its original position. Use it when you want to move an element slightly without affecting the flow of other elements.position: absolute: The element is removed from the normal flow and positioned relative to its first positioned ancestor (one withposition: relative,absolute, orfixed). It’s useful for layering elements or positioning something precisely within a container without influencing others.position: fixed: Similar toabsolute, but the element is positioned relative to the browser window and remains fixed while scrolling (e.g., sticky navigation bars, pop-ups).position: sticky: A mix betweenrelativeandfixed, it allows an element to stay in the flow until a certain condition is met (e.g., when it reaches a specific scroll point, it becomes fixed). It's useful for things like navigation bars that need to remain visible after some scrolling.
Use positioning wisely for specific cases where the normal flow and Flexbox/Grid cannot meet the requirements.
A concrete example: sticky footer solved by Flexbox.
Choose Appropriate Sizes for a Fluid and Responsive Layout
To ensure that the layout remains fluid and responsive, use flexible units like:
-
%: Percentages are relative to the parent container's size, allowing elements to adapt to different screen sizes. -
emandrem: These units are relative to the parent element’s font size (or the root element’s size forrem). They are ideal for creating adaptive sizes, especially for spacing (margin,padding) and dimensions other than100%(width,height). -
vwandvh: These units are relative to the browser window size (1vw= 1% of the window's width, 1vh= 1% of the height). Use them for layouts that adapt to the entire screen size.
Avoid fixed units like px unless absolutely necessary, to ensure the design stays fluid across devices.
A great use case: fluid typography.
My CSS Razor in short
-
Start with the normal flow: Build a layout foundation using block and inline elements, simply adjusting
display,width,height. - Use Flexbox or Grid sparingly: Switch to Flexbox for one-dimensional layouts or Grid for more complex two-dimensional layouts when the normal flow is insufficient.
-
Handle spacing intelligently: Use
marginto space elements apart andpaddingto manage space inside containers. -
Position elements as needed: Use
relativefor minor adjustments,absoluteorfixedfor elements outside the normal flow, and keep everything elsestatic. -
Prioritize fluid units: Use relative units like
%,em,rem,vw, andvhto ensure a fluid and adaptable layout.
By following this methodical approach and simplifying as much as possible, you’ll be able to design effective pages without falling into the traps of overcomplexity while ensuring code maintainability.
What is your CSS razor ?
This content originally appeared on DEV Community and was authored by Romain Guillemot
Romain Guillemot | Sciencx (2024-10-20T16:36:29+00:00) A CSS razor. Retrieved from https://www.scien.cx/2024/10/20/a-css-razor/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.