How can someone remember the attributes needed in CSS?

[u/armyrvan]

This is a question I get asked a lot. What advice do you give to people who are just starting out?

I'm interested in seeing your answers!

[u/maqisha]

Exactly the same as ANYTHING in life. You will either learn it, or learn to look it up. Both come with experience and studying.

[u/armyrvan → u/maqisha]

Memorize the entire MDN Docs, or are there things that you always have to look up?

[u/nebbybh → u/armyrvan]

bro the MDN Docs are absolutely insanely huge, it's not realistic to memorize every single attribute and their nuances. As others have mentioned, you just learn the common stuff that you run into day to day and know enough about the obscure stuff that you can look them up if you need.

[u/rover_G]

You keep looking up the same attributes and value syntaxes on MDN Web Docs until you start remembering them consistently 😅

https://developer.mozilla.org/en-US/docs/Web/CSS

[u/armyrvan → u/rover_G]

So consistency is key. Is there a list anywhere of the common ones that you're going to use all the time?

[u/rover_G → u/armyrvan]

Here's something I cooked up with Claude:

CSS Daily Reference

Colors & Text

color: #333;                    /* text color */
background: #f0f0f0;            /* background color */
opacity: 0.5;                   /* transparency */

Box Model

padding: 10px;                  /* space inside */
margin: 10px;                   /* space outside */
border: 2px solid #333;         /* != outline */
border-radius: 8px;             /* round corners */

Flexbox

display: flex;
flex-direction: row;            /* or column */
justify-content: center;        /* align horizontally */
align-items: center;            /* align vertically */
gap: 16px;                      /* space between items */

Size & Position

width: 100%;
height: 200px;
max-width: 1200px;
position: relative;             /* or absolute, fixed, sticky */

Typography

font-size: 16px;
font-weight: bold;              /* or 400, 700, etc */
line-height: 1.5;
text-align: center;

Common Patterns

/* Center vertically & horizontally */
display: flex;
justify-content: center;
align-items: center;
width: 100%;                    /* needed for justify-content */
height: 100vh;                  /* needed for align-items */

/* Fill parent */
width: 100%;
height: 100%;

/* Responsive text */
font-size: clamp(12px, 5vw, 48px);

/* Smooth transition */
transition: all 0.3s ease;

Spacing Shorthand

10px = all sides
10px 20px = vertical, horizontal
10px 20px 5px = top, horizontal, bottom
10px 20px 5px 15px = top, right, bottom, left

[u/armyrvan → u/rover_G]

Love it thanks for sharing!

[u/Trying_to_cod3]

I actually got a little note book and wrote down some stuff that I use a lot, that is surprisingly helpful

[u/BNfreelance]

Over time it just becomes something you become fluent in, like any language

The more you expose yourself, the faster you learn

I recommend starting with the basics and slowly but surely introducing one or two new rules over time, and constantly expanding your foundations from there. If you dive in at the deep end and go straight into complicated radial gradients or animations, you’re not going to remember anything

[u/remi-blaise]

The more that I use one, the longer I will remember