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

AM – Attribute Modules for CSS

glenmaddern.com

Post reply on HN
Print view View original

11–20 of 58 posts

Re: AM – Attribute Modules for CSS

#11

Post by wildpeaks »

geelen wrote: post #10
wildpeaks wrote: post #7

You may prefer the regular "data-" prefix ( https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin... ) to "am-", especially if you want to be compatible with React.

You can definitely do this, though I think "data-am-" is better to avoid conflicts. React ignores unexpected attributes at the moment, but can't forever with Custom Elements (since it can't know what valid attributes for new elements are). We've got an open discussion on this point, if you want to contribute there: https://github.com/amcss/attribute-module-specification/issu...

"data-am-" would be a good choice indeed :)

Re: AM – Attribute Modules for CSS

#12

Post by masklinn »

taylorlapeyre wrote: post #6

Very interesting approach. One small peeve: this method will not allow you to use Sass/LESS nesting.

why wouldn't it? Attribute selectors are just selectors.

    [foo] {
      color: blue;
      background-color: pink;
      .bar .baz {
        [qux~="ok"] {
          color: red;
        }
      }
    }
compiles to

    [foo] {
      color: blue;
      background-color: pink;
    }
    [foo] .bar .baz [qux~="ok"] {
      color: red;
    }
as I'd expect.

Re: AM – Attribute Modules for CSS

#13

Post by taylorlapeyre »

masklinn wrote: post #12
taylorlapeyre wrote: post #6

Very interesting approach. One small peeve: this method will not allow you to use Sass/LESS nesting.

why wouldn't it? Attribute selectors are just selectors. [foo] { color: blue; background-color: pink; .bar .baz { [qux~="ok"] { color: red; } } } compiles to [foo] { color: blue; background-color: pink; } [foo] .bar .baz [qux~="ok"] { color: red; } as I'd expect.

Oh, lovely! I must have been mistaken then.

Re: AM – Attribute Modules for CSS

#14

Post by huskyr »

masklinn wrote: post #9
huskyr wrote: post #2

This looks a promising approach to the chaos that is writing reusable and maintainable CSS. I wonder about performance though, especially on mobile. Will this perform as good as regular class-written CSS, even if you have >2000 loc CSS files?

Not a chance, browsers can optimise lookup for ids and classes (or even elements by name) because they have spec-defined semantics, and they can be preprocessed based on those semantics (e.g. used to key maps). Custom attributes have arbitrary semantics, so they can't be fit into such a static structure. Technically nothing prevents browsers from inferring specific behaviors from the way a custom attribute is used, a…

Right. Then the question is: does it matter enough in performance that the user might notice it? If it's just a few ms i would be willing to trade that for better maintainability of the CSS. Or maybe you could use some kind of preprocessor that would translate the attributes to regular ids/classnames.

Re: AM – Attribute Modules for CSS

#15

Post by germanforblack »

wildpeaks wrote: post #11
geelen wrote: post #10

Earlier quoted context omitted.

You can definitely do this, though I think "data-am-" is better to avoid conflicts. React ignores unexpected attributes at the moment, but can't forever with Custom Elements (since it can't know what valid attributes for new elements are). We've got an open discussion on this point, if you want to contribute there: https://github.com/amcss/attribute-module-specification/issu...

"data-am-" would be a good choice indeed :)

Absolutely! The prefix is optional (but recommended). If you're comfortable with data attributes (or, they're required for some reason), thats cool too.

Re: AM – Attribute Modules for CSS

#17

Post by ricardobeat »

germanforblack wrote: post #5
huskyr wrote: post #2

This looks a promising approach to the chaos that is writing reusable and maintainable CSS. I wonder about performance though, especially on mobile. Will this perform as good as regular class-written CSS, even if you have >2000 loc CSS files?

Performance of long CSS files isn't really the (major) concern —its how many _elements_ are being traversed (size of the dom) that really effects CSS-selector performance.

After a certain point the number of selectors does affect parsing time and selector matching time, in a very significant way.

Performance has improved a bit since this post but it's still relevant: http://perfectionkills.com/profiling-css-for-fun-and-profit-...

Re: AM – Attribute Modules for CSS

#19

Post by CatsoCatsoCatso »

_lce0 wrote: post #8

interesting approach! any real web/app using this technique?

I hacked together a markdown editor with previews. To allow the user to change how an image was displayed they could put space separated options in the alt text values of the syntax.

eg. ![Cute-Cat aside max500px](/path/to/img.jpg)

Aside & max500px were then picked up the CSS using the images alt attribute as the selectors.

It was a terrible hack but it worked.

Re: AM – Attribute Modules for CSS

#20

Post by shadowmint »

Looks like tal:attributes to me. That was a terrible idea before, and its a terrible idea now.

Honestly, what problem is this actually solving?

You have .foo, .foo--bar, .foo--extra, and you're concerned the style tags are what... not pretty enough? Too hard to visually parse? Too complex when you're building a large css framework?

I really don't understand the problem.

...but having worked with tal, I can hands down say I hate the custom attribute syntax; it scatters the style into multiple locations and makes it unclear what parts are data and what parts are presentation.

I thought we all agreed that:

     Its 1998! Hi!
Was a bad thing. (and that was fifteen years ago... lessons from the past or whatever...)
Post reply on HN