Ideas about using attributes for css selectors (AMCSS)

[viT-1]

Do you use attribute selectors (especially with data-attributes)?

[jacobxperez]

@viT-1 Thanks for opening up a discussion tab. I have been developing Rams a CSS framework to prove that it is possible to design a website using pure data attributes for styling components instead of the industry standard CSS classes. I have discovered that data attributes are more convenient than class since they allow us to use custom names data-* where the * can be replaced by any name, and then add any value data-name="values". With this knowledge, I have created Rams which have bootstrap-like components, however because of the nature of data attributes my components are more reusable as in the case of the data-anchor link component which can be used to create multiple navigational systems just by changing there value data-anchor="navbar" in this case the value is "navbar" indicating that the navigation link belongs and it's styled for the navbar. Base styles can be created with names then their proceeding variations can be created using values.

[jacobxperez]

How does the abbreviation RAMS stand for?

Rams is the name of my favorite designer Dieter Rams

[viT-1]

I think that utility classes (Tailwind way) is a worst way...

[viT-1]

<nav data-navbar="top">
  <ul data-flex>
    <li><a data-anchor="navbar" href="">Home</a></li>
    <li data-item="grow"></li>
    <li><a data-anchor="navbar" href="">Anchor</a></li>
    <li><a data-anchor="navbar" href="">Anchor</a></li>
    <li><a data-anchor="navbar" href="">Anchor</a></li> 
  </ul>
</nav>

What selectors will be applied to this markup? BEM (and iAMcss) is about minimal specify (against css-hell: with !important and facepalm code).

[viT-1]

[data-flex~="grow-children"] > * {	  
flex-grow: 1;	  
}

I don't think that strict nesting selectors are valid way, because of flexibility markup and specify.

[viT-1]

If I need to use context selectors but minimal specify, I have three ways, one with ancestor block as modifier:
[iam-h *= "iam-article h1"] or valid: [data-iam-h *= "data-iam-article h1"]
and two with css vars (toggler technic can't be used with minified css).

[jacobxperez]

The amcss system is not a valid web standard so I just use data attributes to style my components, however, I believe we should have a valid standard instead of using data attributes. Have you created anything cool using pure data attributes I would like to see?

[viT-1]

There is a one example of iAMcss 1.0 with using data-attributes. But it is very obsolete, because it allows to mix many blocks (BEM thinking) as classes on same data-element="modificator".

The actual iAMcss v3 using block-name-element-name="modificator-name" kebab naming, it is not valid but you can use it as data-block-name-element-name="modificator-name". Why kebab and not snake naming? Because of html-attributes and html-tags (web-components) use it.
iAMcss v3 invalid attributes example.

[jacobxperez]

There is a one example of iAMcss 1.0 with using data-attributes. But it is very obsolete, because it allows to mix many blocks (BEM thinking) as classes on same data-element="modificator".

I don't use classes with Rams everything is styled using data attributes

[jacobxperez]

<nav data-navbar="top">
  <ul data-flex>
    <li><a data-anchor="navbar" href="">Home</a></li>
    <li data-item="grow"></li>
    <li><a data-anchor="navbar" href="">Anchor</a></li>
    <li><a data-anchor="navbar" href="">Anchor</a></li>
    <li><a data-anchor="navbar" href="">Anchor</a></li> 
  </ul>
</nav>

What selectors will be applied to this markup? BEM (and iAMcss) is about minimal specify (against css-hell: with !important and facepalm code).

I never use the !important property, everything is set with low specificity.

Anchor

[data-anchor] {
    display: block;
    padding: $space-y $space-x;
    color: $anchor-color;
    font-family: $anchor-font-family;
    text-decoration: none;
    cursor: pointer;
    transition: $anchor-transition;

    &:where([data-state="active"], :hover, :active) {
        color: $anchor-active-color;
        text-decoration: none;
    }

    &:focus {
        outline: thin dotted;
        outline-offset: -0.125rem;
    }
}

Navbar

[data-navbar] {
    width: 100%;
    background-color: $navbar-background;
    color: $navbar-anchor-text-active;
}

[data-navbar="top"],
[data-navbar="bottom"] {
    z-index: 1000;
    position: fixed;
}

[data-navbar="top"] {
    top: 0;

    :where(&) [data-dropbox] {
        top: 100%;
    }
}

[data-navbar="bottom"] {
    bottom: 0;

    :where(&) [data-dropbox] {
        bottom: 100%;
    }
}

[data-anchor~="navbar"] {
    color: $navbar-anchor-text;

    &:where([data-state="active"], :hover, :active) {
        color: $navbar-anchor-text-active;
    }
}

[data-dropbox~="navbar"] {
    background-color: $navbar-dropbox-background;
}

Flex box

[data-flex] {
    display: flex;
}

[data-item~="grow"] {
    flex-grow: 1;
}

[viT-1]

If it were necessary to correct the view of the bottom navbar item, what would the selector look like?
data-state: I was thinking about using separate attributes for BEM-modifiers/states, but refused them based on considerations to avoid sharing states on multiple block-elements on one DOM-node.

[jacobxperez]

[data-flex~="grow-children"] > * {	  
flex-grow: 1;	  
}

I don't think that strict nesting selectors are valid way, because of flexibility markup and specify.

This is a valid CSS selector and it works as expected an alternative will be data-item~="grow" which I am using in the navbar

[viT-1]

Yes, It is valid but I prefer to avoid this style (because of css-hell, specificy and rigid tie on markup).

[jacobxperez]

I think that utility classes (Tailwind way) is a worst way...

I don't like Tailwind atomic design or classes, and I don't believe everything should be set with utility classes. I use utility data attributes to do minor adjustments, everything else is build as a component.

[viT-1]

Minor ajustents on the start, unmaintainable (not clean) code over time ;)

[jacobxperez]

If I need to use context selectors but minimal specify, I have three ways, one with ancestor block as modifier: [iam-h *= "iam-article h1"] or valid: [data-iam-h *= "data-iam-article h1"] and two with css vars (toggler technic can't be used with minified css).

Can you show me how you will use them in an HTML file?

[viT-1]

<body data-iam-skin="dark">
<h1 data-iam-h="h1"></h1>
<article data-iam-article>
    <h1 data-iam-h="data-iam-article h1"></h1>
</article>
</body>