My favourite 3 lines of CSS

#1

Post by chenster » Tue, Feb 21, 2023, 6:23 AM UTC

My favourite 3 lines of CSS
andy-bell.co.uk

Re: My favourite 3 lines of CSS

#2

Post by shashanoid » Tue, Feb 21, 2023, 6:45 AM UTC

Mine's display: flex, flex-direction: row, justify-content: space-between

Re: My favourite 3 lines of CSS

#3

Post by ironmagma » Tue, Feb 21, 2023, 6:46 AM UTC

It’s amazing that CSS has such advanced features that can do these things, but at the same time if you actually use them extensively and then I inherit your code, you kind of deserve a knifing.

Re: My favourite 3 lines of CSS

#4

Post by tangue » Tue, Feb 21, 2023, 7:02 AM UTC

ironmagma wrote: post #3

It’s amazing that CSS has such advanced features that can do these things, but at the same time if you actually use them extensively and then I inherit your code, you kind of deserve a knifing.

Worst thing is the comment (if there's any) is probably something like

  /* lobotomized owl typography*/

Re: My favourite 3 lines of CSS

#5

Post by woahitsraj » Tue, Feb 21, 2023, 7:09 AM UTC

We get so much power from just setting global scoped styles like this it's so strange to me that more of these patterns aren't common or included in minimal css frameworks.

With all the recent criticism of tailwind, css-in-js, and other bloated frameworks I truly feel like 90% of projects could get away with a handful of sensible global styles or "classless css" and then aggressive use of components with scoped styles. You hardly ever need anything else

Re: My favourite 3 lines of CSS

#6

Post by sjsanc » Tue, Feb 21, 2023, 7:15 AM UTC

shashanoid wrote: post #2

Mine's display: flex, flex-direction: row, justify-content: space-between

Absolutely. You can usually drop the direction though as it's the initial value. But flex is so powerful for layouts, I'll slap it on almost anything, and barely have a need for grid.

Re: My favourite 3 lines of CSS

#7

Post by grishka » Tue, Feb 21, 2023, 7:15 AM UTC

Here are my favorite 4 lines of CSS:

    *, *::before, *::after{
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

Re: My favourite 3 lines of CSS

#8

Post by personjerry » Tue, Feb 21, 2023, 7:16 AM UTC

While this is clever, it's rather difficult to understand and maintain. Imagine having to sift through a CSS file full of > * + * and assorted symbols and figuring out what they mean (and seeing this article, it's clearly not that simple to explain in documentation either).

Re: My favourite 3 lines of CSS

#9

Post by zoul » Tue, Feb 21, 2023, 7:16 AM UTC

I am increasingly worried about the “smart” CSS solutions. The spec is already huge, the selectors are hard to read and google, the interplay between various features is devilishly complex. And the CSS community seems to be very fond of these smart hacks where people in the know say “Oh, that’s just Foo’s variation on Bar’s flex owl hammer” and you are left to study the CSS lore for hours to decrypt the two or three letters. I just wish we would value simplicity over cleverness.

Re: My favourite 3 lines of CSS

#10

Post by asplake » Tue, Feb 21, 2023, 7:16 AM UTC

In case you had to look it up (I did), the lobotomised owl: https://alistapart.com/article/axiomatic-css-and-lobotomized...