I love front-end development, but there is one thing about it that I do not particularly like: naming things. Using ID’s and classes on HTML elements and deciding what to name things in CSS is extremely hard. Even harder than solving cross-browser bugs.
Proving how difficult naming in CSS is, there are numerous methodologies such as; SMACSS (Scalable and Modular Architecture for CSS), BEM (Block Element Modifier), OOCSS (Object Oriented CSS), ACSS (Atomic CSS Architecture) and a few others.
I work with Bootstrap for its grid system from time to time. I sometimes need to add in custom styling using Bootstrap breakpoint sizes and the documentation for Bootstrap (at least version 3) is horrible.
Extra small: xs – 480px Small: sm – 768px Medium: md – 992px Large: lg – 1200px Depending on whether or not you’re working mobile first, which in that case you would be using min-width and if you’re working from a breakpoint based responsive workflow you would be using max-width instead.
As great as CSS is, there is one thing that it lacks and that is a parent selector. The supposed reason for its nonexistence is performance concerns.
People forget that the CSS specification as it currently stands offers many selector features which when used incorrectly could be considered bad for performance.
I think justifying the lack of :parent selector purely because of performance concerns is silly. It’s like Javascript lacking the native forEach method because it is less performant than a native for or while and can introduced performance issues.
Occasionally the Internet delivers and gives us something decent other than videos of cats playing keyboards.
Flexbox is one of the newest and potentially most useful parts of CSS3 in a very long time. Support amongst browsers is fairly decent and while it is not really that new, being able to use it is.
This cheatsheet shows some nice easy to understand and follow, examples of how to use Flexbox. While the cheatsheet does not explain all of the great uses of Flexbox, it will help you understand how to use it.
I’ve found the solution if you have ever used the font face technique and encountered an issue where the text looks bold on a Mac yet looks perfectly fine on Windows. It’s almost like the font size or weight is wrong. But, as you’re going to learn, that is not the issue.
As of 2023, I still encounter this CSS issue, specifically in Chrome on Mac. It’s only with certain fonts, but this issue doesn’t appear to have gone away entirely.