The CSS Mindset

Ah yes, CSS. Hardly a week passes without it being the topic of a heated online discussion. It's too hard. It's too simple. It's unpredictable. It's not a real programming language. Peter Griffin struggles with blinds dot gif.

I don’t know why CSS sparks so many different emotions in developers, but I have a hunch as to why it can sometimes seem illogical or frustrating: You need a certain mindset to write good CSS.

Now, you probably need a mindset for coding in general, but the declarative nature of CSS makes it particularly difficult to grasp, especially if you think about it in terms of a “traditional” programming language.

Robin Rendle makes a very good point in this CSS-Tricks Newsletter where he finds that CSS lives somewhere between rigid, logical systems like Math and flexible, adaptive systems like natural languages:

a diagram with three boxes on an axis. the first box lists properties of mathematics: rigid; emperical; logical. The last says natural language is flexible; adaptive; illogical. CSS sits in between.
Comparison of Math, CSS and Language by Robin Rendle, 2019

Other programming languages often work in controlled environments, like servers. They expect certain conditions to be true at all times, and can therefore be understood as concrete instructions as to how a program should execute.

CSS on the other hand works in a place that can never be fully controlled, so it has to be flexible by default. It’s less about “programming the appearance” and more about translating a design into a set of rules that communicate the intent behind it. Leave enough room, and the browser will do the heavy lifting for you.

For most people who write CSS professionally, the mindset just comes naturally after a while. Many developers have that “aha!” moment when things finally start to click. It’s not just about knowing all the technical details, it’s more about a general sense of the ideas behind the language.

This is true whether you write CSS-in-JS, Sass or plain vanilla stylesheets. The output will always be CSS - so knowing these concepts will be helpful regardless of your tooling choice.

I tried to list some of them here.

Everything is a Rectangle

This seems obvious, given that the box model is probably one of the first things people learn about CSS. But picturing each DOM element as a box is crucial to understanding why things layout the way they do. Is it inline or block level? Is it a flex item? How will it grow/shrink/wrap in different contexts?

Open your devtools and hover over elements to see the boxes they're drawing, or use a utility style like outline: 2px dotted hotpink to visualize its hidden boundaries.

The Cascade is your Friend

The Cascade - a scary concept, I know. Say “Cascade” three times in front of a mirror and somewhere, some unrelated styling will break.

While there are legitimate reasons to avoid the cascade, it doesn’t mean that it’s all bad. In fact, when used correctly, it can make your life a lot easier.

The important part is to know which styles belong on the global scope and which are better restricted to a component. It also helps to know the defaults that are passed down, to avoid declaring unnecessary rules.

As much as necessary, as little as possible

Aim to write the minimal amount of rules necessary to achieve a design. Fewer properties mean less inheritance, less restriction and less trouble with overrides down the line. Think about what your selector should essentially do, then try to express just that. There’s no point in declaring width: 100% on an element that’s already block-level. There’s no need to set position: relative if you don’t need a new stacking context.

Avoid unnecessary styles, and you avoid unintended consequences.

Shorthands have long effects

Some CSS features can be written in “shorthand” notation. This makes it possible to declare a bunch of related properties together. While this is handy, be aware that using the shorthand will also declare the default value for each property you don’t explicitly set. Writing background: white; will effectively result in all these properties being set:

background-color: white;
background-image: none;
background-position: 0% 0%;
background-size: auto auto;
background-repeat: repeat;
background-origin: padding-box;
background-clip: border-box;
background-attachment: scroll;

It's better to be explicit. If you want to change the background color, use background-color.

Always Be Flexible

CSS deals with a large amount of unknown variables: screen size, dynamic content, device capabilities - the list goes on. If your styles are too narrow or restrictive, chances are one of these variables will trip you up. That’s why a key aspect in writing good CSS is to embrace its flexibility.

Your goal is to write a set of instructions that is comprehensive enough to describe what you want to achieve, yet flexible enough to let the browser figure out the how by itself. That’s why its usually best to avoid “magic numbers”.

Magic numbers are random hard values. Something like:

.thing {
width: 218px; /* why? */
}

Whenever you find yourself tapping the arrow key in your devtools, adjusting a pixel value to make something fit - that’s probably a magic number. These are rarely the solution to a CSS problem, because they restrict styles to a very specific usecase. If the constraints change, that number will be off.

Instead, think about what you actually want to achieve in that situation. Alignment? An aspect ratio? Distributing equal amounts of space? All of these have flexible solutions.

In most cases, it's better to define a rule for the intent, rather than hard-code the computed solution to it.

Context is Key

For many layout concepts it’s imperative to understand the relationship between elements and their container. Most components are sets of parent and child nodes. Styles applied to the parent can affect the descendants, which might make them ignore other rules. Flexbox, Grid and position:absolute are common sources of such errors.

When in doubt about a particular element behaving different than you'd want it to, look at the context it's in. Chances are something in its ancestry is affecting it.

Content will change

The number one mistake made by designers and developers alike is assuming that things will always look like they do in the static mockup. I can assure you, they will not.

Strings may be longer than intended or contain special characters, images might be missing or have weird dimensions. Displays may be very narrow or extremely wide. Those are all states you need to anticipate.

Always be aware that what you see is just one UI state in a bigger spectrum. Instead of styling the thing on your screen, try to build a "blueprint" of the component. Then make sure that whatever you throw at it won't break your styling.

Find Patterns and re-use them

When you set out to turn a design mockup into code, it’s often helpful to take inventory of the different patterns included first. Analyse each screen and take note of any concept that occurs more than one. It might be something small like a typographic style, or large like a certain layout pattern. What can be abstracted? What’s unique?

Thinking of pieces in a design as standalone things makes them easier to reason about, and helps to draw the boundaries between components.

Use consistent Names

A surprisingly large part of programming in general is coming up with good names for stuff. In CSS, it helps to stick to a convention. Naming schemes like BEM or SMACSS can be very helpful; but even if you don’t use them, stick to a certain vocabulary. You’ll find that certain component patterns come up over and over - but is it called a “hero” or a “stage”? Is it “slider” or “carousel”?

Establish a routine in how you name parts of your UI, then stick to that convention in all your projects. When working in a team, it can be helpful to agree on component names early on and document them somewhere for new team members.


All these things were important for me to understand, but your personal experience as to what matters most might be different. Did you have another “aha” moment that made you understand CSS better? Let me know!

Update: I did a talk about the CSS Mindset at CSS-Minsk-JS in September. There’s also a video recording available, if you prefer that.

Further Reading

Webmentions

What’s this?
  1. Harry Roberts
    Oooh. I like this!
  2. Franco Scarpa
    Really liked this article by @mxbck. A set of guidelines to embrace the fluidity of the web and devices.
  3. Adam Norris
    😍 I can really relate to this! Great article!
  4. Manuel Matuzović
    Fantastic advice by Max. I'll share this post with every new class I teach.
  5. Marek Piechura
Show All Webmentions (188)
  1. Max Böck
    Thanks Mauricio!
  2. Juan
    "The number one mistake made by designers and developers alike is assuming that things will always look like they do in the static mockup. I can assure you, they will not." @mxbck I should put this on a t-shirt… and my email signature and my forehead… mxb.dev/blog/the-css-m…
  3. Joonas Kallunki
    "Then make sure that whatever you throw at it won’t break your styling. Strings may be longer than intended, images might be missing or have weird dimensions. Displays may be very narrow or extermely wide. Those are all states you need to anticipate." mxb.dev/blog/the-css-m…
  4. Juan
    That “a-ha” moment for me was when I opened up the Chrome Dev Tools the first time and saw how the various parts of the Box Model were highlighted. Same thing happened with Grid thanks to Firefox’s Grid Inspector.
  5. Koen Haesaerts
    You forgot tot mention specificity. CSS is all about specificity and cascading.
  6. Specificity is a feature of the cascade.
  7. Andy Bell
    “Always be aware that what you see is just one UI state in a bigger spectrum. Instead of styling the thing on your screen, try to build a ‘blueprint’ of the component. Then make sure that whatever you throw at it won’t break your styling” mxb.dev/blog/the-css-m… Great by @mxbck
  8. This article would be worth the read if it only said "Shorthands have long effects" but there's a lot of other great information here too.
  9. Max Böck
    yeah there's lots of things I didn't mention. It's not really about the technical basis though, so I feel that's OK.
  10. The only thing I don't really know how to do yet, which is listed in this article, is the consistent naming convention (from the known ones). But yes, agree to everything here! This is what helps me translate designs into code, and this mindset also helps me in designing 😆
  11. Reinhard Steudel
    If you have started with #CSS and you struggle, spend some time and read @mxbck 's article, it will really helps you - I promise 😊
  12. Dan Tonon
    @mxbck wrote this terrific article giving some great advice on how to get into the right mindset to write good CSS. If you are a beginner or you dread writing CSS, I'm sure applying these things will see some significant improvements in your CSS skills. mxb.dev/blog/the-css-m…
  13. Daniel Tan (he/they)
    This here is the single best sub-5-minute introductory article about understanding and writing CSS you will ever read. Subheadings include "Everything is a Rectangle", "The Cascade is your Friend" and "Context is Key". It all starts with the right mindset. https://t.co/SFw6WqnqZJ
  14. For Web
    Для вёрстки нужен особый образ мышления, утверждает Макс Бок и делится идеями, ставшими для него ключом к пониманию CSS → mxb.dev/blog/the-css-m…
  15. Andrey Pelykh
    "Avoid unnecessary styles, and you avoid unintended consequences." Nice point 👍
  16. Oleg
  17. Slade 🇺🇸⚓️
    Fwiw...I hugged each and every one of your commas.
  18. CSS {IRL}
    A wonderful post by @mxbck: The CSS Mindset mxb.dev/blog/the-css-m…
  19. James Steinbach
    Ever have a hard time getting your mind around "how CSS works?" Here's a great post that'll help: The CSS Mindset, by @mxbck mxb.dev/blog/the-css-m…
  20. One of the hardest things for me when I started learning CSS: the cascade. #CSS
  21. Marko Čakarević
    The CSS Mindset | Max Böck - Frontend Web Developer #css #webdev mxb.dev/blog/the-css-m…
  22. JSter
    The CSS Mindset by @mxbck buff.ly/2XuiT0H
  23. Van
    👇
  24. KT Coope 🐝
    This is great. Lots of stuff about CSS just being impossibly hard seems to stem from just not sitting comfortably in the mindset you need to understand it.
  25. Mike Davidson
    How I feel (and look) three hours into vertically centering a div. mxb.dev/blog/the-css-m…
  26. CSS-Tricks
    The CSS Mindset mxb.dev/blog/the-css-m… "Everthing is a Rectangle" (That was mine in 2008! css-tricks.com/the-css-ah-ha-…) "The Cascade is your Friend" "Content will change"
  27. jemoraz
    The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…, see more tweetedtimes.com/jemoraz?s=tnp
  28. Rio
  29. Micek
    The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…
  30. Masahiro Harada
    CSSマインドセット。 ・すべては四角形 ・カスケードは友だち ・記述は必要最低限に ・ショートハンドの副作用 ・常にフレキシブルに ・コンテキストがカギ ・コンテンツは変化する ・パターンを探して再利用 ・一貫性ある命名規則 mxb.dev/blog/the-css-m…
  31. ダーシノ
    The CSS Mindset | Max Böck mxb.dev/blog/the-css-m… CSSの考え方: すべては長方形、最小限のプロパティ、マジックナンバー死すべしなど > I know. Say “Cascade” three times in front of a mirror and somewhere, some unrelated styling will break. カスケードは「正しく恐れる」のが重要だね!
  32. Jake Neal
  33. Ximena Vila Ferral
    "You need a certain mindset to write good CSS." – @MicheBarks mxb.dev/blog/the-css-m…
  34. Refresh Detroit
    "CSS on the other hand works in a place that can never be fully controlled, so it has to be flexible by default." mxb.dev/blog/the-css-m…
  35. Keith Rogers
    Lots of great CSS advice here 👌
  36. ➡️ runtcpip.com
    I thought CSS was ridiculously hard as a child on Neopets...I'm still hanging out with the basics, but I find it a fun challenge. Getting into the higher concepts will probably make me temporarily mad lol
  37. Max Böck
    I also started out tweaking myspace themes and I had no idea what I was doing. It just takes a bit of patience I guess 😅
  38. Mario Hernandez
    Excellent post on CSS
  39. Luis A. Linan
    A good book you would recommend? I've tried a few, but they just didn't work for me.😞
  40. Carlo Bruno
    Adapting these mindsets will make CSS easier to work with! 🔥
  41. I used to take being able to code css well for granted. Something any developer could do. But the more contact I’ve had with other developers I realized how coding good css is a real valuable skill set. mxb.dev/blog/the-css-m…
  42. Facundo Corradini
    Great article! I believe the issue goes even deeper. Imperative programming languages rely heavily on logical-mathematical intelligence, while HTML + CSS work more on the linguistics intelligence. So imo is not just a matter of difference mindsets, but different minds.
  43. IT Ninjas
    Nice, thanks for sharing man. Getting to a point where you are comfortably writing css on the fly accurately is so big to new devs, I struggled with it.
  44. Zoey Nguyen
    The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…
  45. Jason Frazzano
    It’s mostly frustrating because of browser inconsistency. Example grid css on slots in a custom element. Mozilla won’t expand a grid cell if child width changes. But will animate grid cola and rows. No one ear will. Safari handles absolute position4slot chaotically &scales wtf.
  46. Jason Frazzano
    Like theoretically, grid plus subgrid lus slot could allow a flat dom. App_grid>slots[header,footer,main,left drawer,right drawer,apply subgrids to the slots and you just drop components into app and voila... but its implemented in an obstructionist manner
  47. Nicole Lambon
    Too true, but then again, CSS Junkie here! 🤪 The CSS Mindset by @mxbck buff.ly/2XuiT0H
  48. David Lewis
    Now take someone who doesn’t understand these basics and throw a massive CSS framework in the mix and it’s no wonder they hate it. It helps to be able to think like a designer and to write it from scratch. I don’t even use a reset or normalize.
  49. Beatrice Williams
    "CSS [...] works in a place that can never be fully controlled, so it has to be flexible by default." #webdev mxb.dev/blog/the-css-m…
  50. Adactio Links
    The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…
  51. Emily
    "The Cascade - a scary concept, I know. Say “Cascade” three times in front of a mirror and somewhere, some unrelated styling will break." 😅😅 mxb.dev/blog/the-css-m…
  52. Scott de Jonge
    As much as necessary, as little as possible. Fewer properties mean less inheritance, less restriction and less trouble with overrides down the line. mxb.dev/blog/the-css-m…
  53. “The CSS Mindset” by @mxbck mxb.dev/blog/the-css-m…
  54. Peeke Kuepers
    The 'everything is a square' bit helped me a lot at the time. Great article!
  55. Adam Argyle
    mild mannered sane advice 👍
  56. Richnou
  57. Créer Un Site Pro
    L'état d'esprit qu'il faut pour faire du #CSS ! mxb.dev/blog/the-css-m…
  58. Clever Cloud
    [news] 🗞 The CSS Mindset mxb.dev/blog/the-css-m… (blog) #CSS
  59. Paviel Łaŭcevič
    There are so simple things described in this article, which are ignored by a huge amount of developers. Try to understand this and you'll love #CSS! 👍 mxb.dev/blog/the-css-m…
  60. Erik Zettersten
    The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…
  61. Ash
    The CSS Mindset. “It’s better to be explicit.” “In most cases, it’s better to define a rule for the intent, rather than hard-code the computed solution to it.” Much more wisdom within! mxb.dev/blog/the-css-m…
  62. Jordan Little
    Fantastic read for anyone learning CSS. mxb.dev/blog/the-css-m…
  63. Chialin Chou
    The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…
  64. Underland
    Great advice for #CSS pros and total beginners. It's easy to form bad habits that bloat your code. Rewrite your mind. #webdev #webdesign mxb.dev/blog/the-css-m…
  65. ゆいっつあん
    Daily Pickup:The CSS Mindset mxb.dev/blog/the-css-m…
  66. Marichka Offen
    I will be reading this article and take it as a kind of meditation before making CSS-mess 😅 mxb.dev/blog/the-css-m…
  67. The CSS mindset Definitely worth a read if you struggle with CSS :) mxb.dev/blog/the-css-m… by @mxbck
  68. D∆VID Λ.
    Good write-up about the CSS-Mindset: mxb.dev/blog/the-css-m…
  69. Chris Heilmann
    "The CSS Mindset" mxb.dev/blog/the-css-m… @mxbck with some great advice how to find happiness in CSS.
  70. Pinboard Popular
    The CSS Mindset —Max Böck - Frontend Web Developer “Ah yes, CSS. Hardly a week passes without it being the topic of a heated online discussion. It’s too hard. It’s too simple. It’s unpredictable. It’s outdated.” mxb.dev/blog/the-css-m…
  71. Pinboard Popular
    The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…
  72. Adriano - Mr Kuzio
    CSS is less about “programming the appearance” and more about translating a design into a set of rules that communicate the intent behind it.mxb.dev/blog/the-css-m…
  73. James Kenny
    This is a really good post on CSS with some good tips for writing good CSS mxb.dev/blog/the-css-m… by @mxbck
  74. CSS Basics
    The CSS Mindset: "CSS can be difficult to grasp if you think about it in terms of a 'traditional' programming language. There is a certain mindset involved that helps to understand why it works the way it does." by @mxbck mxb.dev/blog/the-css-m…
  75. Front-End Front
  76. Max Antonucci
    For all those who dislike the #CSS programming language, @mxbck has a great piece on getting into the right mindset for it.mxb.dev/blog/the-css-m…
  77. _faz
    The CSS mindset, by @mxbck mxb.dev/blog/the-css-m…
  78. Jacky
    The CSS Mindset | Max Böck – Frontend Web Developer mxb.dev/blog/the-css-m…
  79. Sebastian Andil
    “You need a certain mindset to write good CSS” The CSS Mindset mxb.dev/blog/the-css-m…
  80. a concise, thorough, and thoughtful essay of the complexity and flexibility of css, by @mxbck mxb.dev/blog/the-css-m…
  81. Zdroják.cz
    Článek “CSS mindset” popisuje základní myšlenkové modely pro práci s CSS. Nepodceňujte je, to bývá častý problém vývojářů, kteří jsou zvyklí na jiné typy jazyků. mxb.dev/blog/the-css-m…
  82. Luis Calvo
  83. まとり
    “Say “Cascade” three times in front of a mirror and somewhere, some unrelated styling will break.” ここ笑ってしまった / The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…
  84. Frontend Daily
    The CSS Mindset: mxb.dev/blog/the-css-m… 💬 Outlines the 'ideas behind the language' that you need to know in order to write good CSS.
  85. Paul Bakaus
    CSS requires a different mindset, indeed. Couldn't help but see the similarities to declarative HTML frameworks (e.g. @AMPhtml), that also require a different mindset. mxb.dev/blog/the-css-m…
  86. Satoshi Takeda
    シンプルだけどすごく良い。CSS に取り組むためのマインドセット。ブロックモデルの理解やカスケードの意味、ショートハンドの禁止や親子間コンテキストによるスタイルの違いなど。 mxb.dev/blog/the-css-m…
  87. Kav
  88. Martin Gonzalez
    You probably need a mindset for #coding in general, but the declarative nature of #CSS makes it particularly difficult to grasp, especially if you think about it in terms of a “traditional” #programming language. mxb.dev/blog/the-css-m…
  89. Bruce Gilbert
  90. Ricardo Moreira
    This was a good reminder about css and a good way to start for whom is looking first time to it mxb.dev/blog/the-css-m…
  91. Brian Haferkamp
    Wonderful article from @adactio that might help anyone struggling to learn #CSS. mxb.dev/blog/the-css-m… #WebDev #WebDevelopment #WebDesign #Design #HTML #CodeNewbie #100DaysOfCode
  92. Vzhůru dolů
    Nastavení mysli pro práci s CSS: — Všechno je čtverec — Kaskáda je dobrá (jistěže: vrdl.cz/p/css-kaskada) — Bacha na shorthand deklarace — Vynechte magická čísla jako "width: 218px" — Hlídejte kontext (k věci: vrdl.cz/p/komponenty-k…) mxb.dev/blog/the-css-m…
  93. Chelsea Stauber
    A lesson in abductive logic. mxb.dev/blog/the-css-m…
  94. Thierry Langlois
    #css "The important part is to know which styles belong on the global scope and which are better restricted to a component." mxb.dev/blog/the-css-m…
  95. An insightful article regarding the mindset of writing CSS. It also has some other great nuggets of advice regarding the dangers on shorthand and other topics. “ThE CSS Mindset” by Max Böck mxb.dev/blog/the-css-m…
  96. Dom McLoughlin
    Inside the mindset of a good CSS’er. Good piece here by @mxbck mxb.dev/blog/the-css-m…
  97. Ms Ellie V♥
    The CSS mindset - great read. mxb.dev/blog/the-css-m…
  98. Catalin Rosu
    CSS. It’s too hard. It’s too simple. mxb.dev/blog/the-css-m…
  99. InVision
    "It’s not just about knowing all the technical details, it’s more about a general sense of the ideas behind the language." - @adactio on the #CSS mindset mxb.dev/blog/the-css-m… via @mxbck
  100. Chris Heilmann
    "The CSS mindset" mxb.dev/blog/the-css-m… Excellent post by @mxbck how to prepare for writing CSS: * Everything = rectangle * Cascade = friend * As much as needed is good, not more * Shorthand = powerful & confusing * Be flexible * Stay consistent YOU CODE FOR THE UNKNOWN!
  101. D:CODED
    "The CSS mindset" mxb.dev/blog/the-css-m… When writing #CSS think... #CodeNewbie #100DaysOfCode #developers #webdevelopers * Everything = rectangle * Cascade = friend * less is more * Shorthand = powerful & confusing * Be flexible * Stay consistent YOU CODE FOR THE UNKNOWN!
  102. Russell Heimlich
    "Instead of styling the thing on your screen, try to build a “blueprint” of the component. Then make sure that whatever you throw at it won’t break your styling." - @mxbck mxb.dev/blog/the-css-m…
  103. Ruben Rojas
    The CSS Mindset | Max Böck - Frontend Web Developer mxb.dev/blog/the-css-m…
  104. The CSS Mindset by @mxbck --> mxb.dev/blog/the-css-m…
  105. HowtoSolutions
  106. Attineos
    [VEILLE] Si comme certaines personnes vous avez du mal avec le CSS, cet article vous donne quelques pistes sur la façon de "penser CSS": mxb.dev/blog/the-css-m… #veille #css #mindset
  107. Chris Pratt
    "[CSS is] less about 'programming the appearance' and more about translating a design into a set of rules that communicate the intent behind it. Leave enough room, and the browser will do the heavy lifting for you." mxb.dev/blog/the-css-m… @mxbck #preach #css
  108. Nasako
    As much as necessary, as little as possible mxb.dev/blog/the-css-m…
  109. CSS-мышление. Макс Бёк делится советами, которые помогут писать CSS эффективнее — mxb.dev/blog/the-css-m…
  110. Dave Wallace
    Awesome thanks 👍😀
  111. General Assembly MEL
    Want to write better CSS? Get in the right mindset 🧠: ga.co/2ZJUNjx via @mxbck
  112. John Baluka
  113. General Assembly
    Want to write better CSS? Get in the right mindset 🧠: ga.co/2YvRBLX via @mxbck
  114. General Assembly CHI
    Want to write better CSS? Get in the right mindset 🧠: ga.co/2ZJUNjx via @mxbck
  115. Want to write better CSS? Get in the right mindset 🧠: ga.co/2ZJUNjx via @mxbck
  116. mab
  117. Søren Birkemeyer
    Here's a really nice slide deck on "The CSS Mindset" by @mxbck – it's a great companion to his original blog article: mxb.dev/blog/the-css-m…
  118. Nicolas Rouanne
    « Aim to write the minimal amount of rules necessary to achieve a design. Fewer properties mean less inheritance, less restriction and less trouble with overrides down the line. » i.e. most important CSS advice ever mxb.dev/blog/the-css-m…
  119. Ahmed Nasr
    Some CSS features can be written in “shorthand” notation. This makes it possible to declare a bunch of related properties together. While this is handy, be aware that using the shorthand will also declare the default value for... mxb.dev/blog/the-css-m…
  120. Craig
    Some things that are good to keep in mind when writing your CSS mxb.dev/blog/the-css-m…
  121. Lukas Grebe
    No way! You wrote that? Feels like I read it ages ago and it’s been in the back of my mind ever since! But it’s published about a year ago 🤯
  122. Max Böck
    Haha yeah that is a long time in web dev time. Dog year rules apply
  123. Mike Rockétt
    If I ever had to give #CSS advice, this would be it. mxb.dev/blog/the-css-m…
  124. Sara Soueidan
    This is, IMHO, one of the best high-level #CSS articles written and is now officially a personal favorite: "The CSS Mindset" by ⁦@mxbckmxb.dev/blog/the-css-m…
  125. Javid
    that was helpful. i didn't know using shorthands can be dangerous sometimes.
  126. Quentin Bellanger
    Probably already shared this article but hey, it's worth sharing it twice! #css
  127. Keith J Grant
    The is a great rundown on “The CSS Mindset” from ⁦@mxbckmxb.dev/blog/the-css-m…
  128. Flo
    👍
  129. Tim Coomar
    Ένα καταπληκτικό άρθρο. Αγαπητοί pseudoclassίτες/ίτισσες, αυτό ειδικά για σας! 💻🚀 mxb.dev/blog/the-css-m… (Thanks to @SaraSoueidan for bringing it to my attention)
  130. Emmilie Estabillo
    Been working on my CSS game the past few months. 1:1 has been by far the hardest part 👇 “The number one mistake made by designers and developers alike is assuming that things will always look like they do in the static mockup. I can assure you, they will not.”
  131. I am Wes Wilson 👋
    Fantastic read
  132. Roman Trilo
    Pro Tip™️ for designers: Design rules. The best article on CSS so far: mxb.dev/blog/the-css-m…
  133. 🍁 jschof 🦃
    This is good. And if I see another peter griffin struggling with blinds gif I'm going to flip a table
  134. Nikhil 🚀☕
    Do you feel like CSS is hard, or is it just a mindset of yours? A great article by @mxbck mxb.dev/blog/the-css-m…
  135. Accessabilly
    Truly one of the best "meta" articles on #CSS and a thing every lover & every hater should have read! ❤🤟 #webdevelopment #webdev #CSSisJustBeautyful
  136. David Goss
  137. Auch, wenn ich das alles im Grunde weiß, ist es schön, auch mal wieder zu lesen, dass ich nicht der Einzige bin, der damit zu kämpfen hat. 🙂
  138. David Hellmann
    New link: "The CSS Mindset | Max Böck" — bestwebsite.gallery/links/2020/12/… --- Direct Link: Direct Link: mxb.dev/blog/the-css-m…
  139. pstorl
    ⬇️
  140. Philly 🇪🇺
    The CSS mindset - ein absolutes Must-Read. 💯 Passend zur jährlichen 'CSS-sucks-und-ist-keine-richtige-Programmiersprache' Diskussion. 🙄 mxb.dev/blog/the-css-m…
  141. Philly 🇪🇺
    This is so goooood! 💯 Thanks @mxbck
  142. Már Örlygsson 🔵
    This is an excellent article mxb.dev/blog/the-css-m…
  143. Tom Tinkerson
    this is good. "CSS works in a place that can never be fully controlled … It’s less about “programming…” more about translating design into a set of rules that communicate the intent. Leave enough room, and the browser will do the heavy lifting for you." mxb.dev/blog/the-css-m…
  144. Hiku 🤹
    "If your styles are too narrow or restrictive, chances are one of these variables will trip you up. That’s why a key aspect in writing good CSS is to embrace its flexibility." #CSS mxb.dev/blog/the-css-m…
  145. Hiku 🤹
    The CSS Mindset "Other programming languages often work in controlled environments, like servers. They expect certain conditions to be true at all times, and can therefore be understood as concrete instructions as to how a program should execute." mxb.dev/blog/the-css-m…
  146. Hiku 🤹
    The CSS Mindset "It’s less about “programming the appearance” and more about translating a design into a set of rules that communicate the intent behind it. Leave enough room, and the browser will do the heavy lifting for you." mxb.dev/blog/the-css-m…
  147. Johnny Taylor
    “Say ‘Cascade’ three times in front of a mirror and somewhere, some unrelated styling will break… While there are legitimate reasons to avoid the cascade, it doesn’t mean that it’s all bad. In fact, when used correctly, it can make your life a lot easier” mxb.dev/blog/the-css-m…
  148. Hiku 🤹
    The CSS Mindset Ah yes, CSS. "Hardly a week passes without it being the topic of a heated online discussion. It’s too hard. It’s too simple. It’s unpredictable. It’s outdated. Peter Griffin struggles with blinds dot gif." mxb.dev/blog/the-css-m…
  149. Hiku 🤹
    The CSS Mindset "But picturing each DOM element as a box is crucial to understanding why things layout the way they do. Is it inline or block level? Is it a flex item? How will it grow/shrink/wrap in different contexts?" mxb.dev/blog/the-css-m…
  150. Hiku 🤹
    The CSS Mindset 'The important part is to know which styles belong on the global scope and which are better restricted to a component. It also helps to know the defaults that are passed down, to avoid declaring unnecessary rules." mxb.dev/blog/the-css-m…
  151. Hiku 🤹
    The CSS Mindset "Your goal is to write a set of instructions that is comprehensive enough to describe what you want to achieve, yet flexible enough to let the browser figure out the how by itself. That’s why its usually best to avoid “magic numbers”." mxb.dev/blog/the-css-m…
  152. Hiku 🤹
    "A surprisingly large part of programming in general is coming up with good names for stuff. In CSS, it helps to stick to a convention. Naming schemes like BEM or SMACSS can be very helpful; but even if you don’t use them, stick to a certain vocabulary" mxb.dev/blog/the-css-m…
  153. Lucasoft co.uk
    RT @hikupro Surprisingly large part of programming in general is coming up with good names for stuff. In CSS, it helps to stick to convention. Naming schemes like BEM or SMACSS can be very helpful; even if you don’t use them, stick to certain vocabulary mxb.dev/blog/the-css-m…
  154. Tixie
    The CSS Mindset "It’s less about “programming the appearance” and more about translating a design into a set of rules that communicate the intent behind it. Leave enough room, and the browser will do the heavy lifting for you." mxb.dev/blog/the-css-m…
  155. Ho Jen Ning
    the 2021 (and beyond) #CSS article to read mxb.dev/blog/the-css-m… by @mxbck #100DaysOfCode
  156. Marinella Dal Sasso
    The CSS Mindset mxb.dev/blog/the-css-m… "The number one mistake made by designers and developers alike is assuming that things will always look like they do in the static mockup. I can assure you, they will not."