Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Blunt – A CSS Layout Framework for Minimalists

github.com

Post reply on HN
Print view View original

41–50 of 76 posts

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#41

Post by notJim »

lxe wrote: post #37
1ba9115454 wrote: post #22

Personally I prefer to write the CSS (well Sass really). I've mainly used Bootstrap in the past. I've moved on though, I learned flexbox and css grid and some atomic design principals as well as ABEM ( https://css-tricks.com/abem-useful-adaptation-bem/ ) and I'm happy.

Once I discovered utility classes, I found it so much better than BEM or any derivatives of such. I don't want my styles to know what my components are, I want my components to use predefined styles.

I feel like utility classes and BEM go well together, though. BEM for sort of atoms/molecules (to use the lingo from the linked css-tricks page), and then utility classes to tweak the components, and to make components play nicely together (Fixing up margins, etc so things flow right and are the right size.)

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#42

Post by notJim »

1ba9115454 wrote: post #22

Personally I prefer to write the CSS (well Sass really). I've mainly used Bootstrap in the past. I've moved on though, I learned flexbox and css grid and some atomic design principals as well as ABEM ( https://css-tricks.com/abem-useful-adaptation-bem/ ) and I'm happy.

I don't mind hand-writing CSS for a small project, but I feel like once you've got a decent team, it ends up being duplicative and wasting a lot of time. How many times do you really need to style button/link and write out your 8px margins (or is it 6?) Sass solves this too, but simply applying classes is even easier and faster for me at least. I thought BEM was horrible when I first saw it, but once I used it, the productivity just feels like magic.

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#44

Post by seumars »

notJim wrote: post #42
1ba9115454 wrote: post #22

Personally I prefer to write the CSS (well Sass really). I've mainly used Bootstrap in the past. I've moved on though, I learned flexbox and css grid and some atomic design principals as well as ABEM ( https://css-tricks.com/abem-useful-adaptation-bem/ ) and I'm happy.

I don't mind hand-writing CSS for a small project, but I feel like once you've got a decent team, it ends up being duplicative and wasting a lot of time. How many times do you really need to style button/link and write out your 8px margins (or is it 6?) Sass solves this too, but simply applying classes is even easier and faster for me at least. I thought BEM was horrible when I first saw it, but once I used it, the p…

Writing actual CSS is the waste of time. SASS variables, mixins, and the "&" operator are pretty much indespensable.

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#45

Post by type0 »

welly wrote: post #40
dgut wrote: post #11

Earlier quoted context omitted.

Tailwind has a class for almost everything, which makes it quite heavy: 1600kb minified. In my experience you end up with ≤ 15kb of minified CSS after running PurgeCSS anyway, so this is not an issue. Personally I prefer Tailwind because you practically don't have to write any CSS. With something like Blunt expect finding many edge cases where you will have to write custom CSS. I do write custom classes that wrap Tai…

Going slightly off topic but I wonder if anyone can point me to a tailwind "starter kit" - ie. a project with everything in place to get going with tailwind, postcss etc. Thanks!

https://www.tailwindtoolbox.com/

https://github.com/creativetimofficial/tailwind-starter-kit

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#46

Post by runarberg »

notJim wrote: post #42
1ba9115454 wrote: post #22

Personally I prefer to write the CSS (well Sass really). I've mainly used Bootstrap in the past. I've moved on though, I learned flexbox and css grid and some atomic design principals as well as ABEM ( https://css-tricks.com/abem-useful-adaptation-bem/ ) and I'm happy.

I don't mind hand-writing CSS for a small project, but I feel like once you've got a decent team, it ends up being duplicative and wasting a lot of time. How many times do you really need to style button/link and write out your 8px margins (or is it 6?) Sass solves this too, but simply applying classes is even easier and faster for me at least. I thought BEM was horrible when I first saw it, but once I used it, the p…

> How many times do you really need to style button/link and write out your 8px margins.

Either 0 or 1 times. Use semantic classes `` and use custom properties or the cascade from there:

    :root {
      --button-margin-block: 1ex;
      --button-margin-inline: 1em;
    }

    dialog {
      /*
       * Modals buttons need more block space and
       * less inline space.
       */
      --button-margin-block: 1em;
      --button-margin-inline: 1ex;
    }

    button,
    .button {
      margin-block: var(--button-margin-block);
      margin-inline: var(--button-margin-inline);
    }

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#48

Post by runarberg »

seumars wrote: post #44
notJim wrote: post #42

Earlier quoted context omitted.

I don't mind hand-writing CSS for a small project, but I feel like once you've got a decent team, it ends up being duplicative and wasting a lot of time. How many times do you really need to style button/link and write out your 8px margins (or is it 6?) Sass solves this too, but simply applying classes is even easier and faster for me at least. I thought BEM was horrible when I first saw it, but once I used it, the p…

Writing actual CSS is the waste of time. SASS variables, mixins, and the "&" operator are pretty much indespensable.

Vanilla CSS has custom properties[1] (which are more powerful then SASS variables) and there is a proposal for the `&` nested selector[2] which you can get with PostCSS[3]. All you are missing are mixins, but there is a PostCSS plugin for that[4].

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*

[2]: https://drafts.csswg.org/css-nesting-1/

[3]: https://postcss.org/

[4]: https://github.com/postcss/postcss-mixins

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#49

Post by httpsterio »

majewsky wrote: post #34
runarberg wrote: post #12

Sorry if I sound snarky, but why use this if you can just write: Center It looks like these are just single rule classes. In my opinion, If you are going to write one class for each style rule, you might as well use the style property.

On top of what others are saying, on modern websites, inline CSS is usually forbidden by the Content-Security-Policy, to provide defense in depth against CSS injection. (This SO answer summarizes why CSS injection is something to care about: https://stackoverflow.com/a/718614 )

I'm sorry if I misunderstand, but what you linked is related to allowing user created css to be displayed on a service? I don't think it's exactly relevant here. If you're just adding custom css on the page that'd displayed for you, there's no attack vector, but those links in the SO is about injected CSS where the attacker loads custom CSS for other visitors.

It's almost trivial to set up a keylogger with css that fires requests on keyboard input. Luckily there's CSP.

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#50

Post by httpsterio »

majewsky wrote: post #34
runarberg wrote: post #12

Sorry if I sound snarky, but why use this if you can just write: Center It looks like these are just single rule classes. In my opinion, If you are going to write one class for each style rule, you might as well use the style property.

On top of what others are saying, on modern websites, inline CSS is usually forbidden by the Content-Security-Policy, to provide defense in depth against CSS injection. (This SO answer summarizes why CSS injection is something to care about: https://stackoverflow.com/a/718614 )

Inline CSS is in no way dangerous though. Its quite commonly used to defer loading the additional css files to stop render blocking the page. By inlining the above-the-fold CSS aka Critical CSS, you can shave considerable amounts of time in time to interactive clears.
Post reply on HN