2 ms·
CSS can be difficult (not hard, "difficult" like how we would describe a persnickety, sometimes erratic person in our life) but I get the feeling that when hate
by kevinsync 9mo ago
CSS can be difficult (not hard, "difficult" like how we would describe a persnickety, sometimes erratic person in our life) but I get the feeling that when haters rant about how bad or illogical it is, they never even bothered to grasp the first principal that CSS isn't much more than an articulation of the visual characteristics of a nested structure of boxes. That's it.
You have to be able to visualize, from outside-in, the Matryoshka doll of naked structural elements that make up the component, page section, or entire page you're styling, ensure (or hope and pray) they have sane identifiers (id, class, attributes, etc), then start to write out properties like you're writing a recipe.
This was the whole point of CSS Zen Garden [0] -- offer a static, common structure and challenge people to reskin the same thing 1000 different ways.
Now, I do recognize that I'm coming off a little dismissive of the complexity of CSS, and that's not my intent.. I'm one of those people who is a good graphic designer, good developer, and often conceive, design, implement and deliver projects end to end, so when I'm in Photoshop I'm also mentally laying out how these designs will be structured in HTML to then be able to be implemented.
Naming conventions between markup and styling are also important to be able to translate from bitmap to browser without losing context, and I know we're "post-Sass" by a lot of opinions, but I still find writing nested SCSS far more manageable and readable than plain CSS.
Break everything up into discrete components and files, name them well, use box-sizing: content-box to make sure your borders and padding get included in dimensional calculations, imagine in your mind the physical structure/skeleton of the markup, then fill out each part, piece by piece. Browser dev tools to inspect and modify styles in realtime is critical to playing around until you get what you want.
That said, IMO the only way to really get comfortable with all of that is to do actual projects, not just tutorials. There are 1001 ways to achieve most things in CSS, and the sheer scope of the spec is impossible to grasp without constantly looking up what property does what, but it really does just boil down to taming all the boxes on the page one by one.
[0] https://csszengarden.com https://csszengarden.com
- bschmidt600 9mo ago[dead]
- kevinsync 9mo agoedit: I actually meant box-sizing: border-box LOL and mistyped, so maybe I'm just proving everybody's hatred for CSS. I still stand by what I wrote though.