Share on facebook
Share on twitter
Share on linkedin
Share on email

Semantic CSS Styles Using Data Attributes

 

What we currently have in CSS is the use of IDs, classes, pseudo-selectors, and elements. With HTML5 and CSS3, what if I told you there was another option? What I’ve begun using at InfoTrust, inspired by a former coworker (tbremer https://github.com/tbremer), is using data-attributes to control CSS and add another layer of abstraction that benefits specificity in CSS.

css.jpg


[data-button] {
    background-color: grey;
    border: 1px solid black;
    color: black;
}

[data-button="primary"] {
    background-color: blue;
}

[data-button="large"] {
    height: 40px;
    width: 120px;
}

One of the benefits of this approach is the separation of your style guide from your class structure. Who likes looking at classes like this:


<button class=”btn btn-large btn-primary”>Button</button>

Repeating elements like this takes up space and makes your code look complicated, and difficult to type accurately.

Using the data attribute, which is a valid HTML5 selector and can be targeted by both CSS and Javascript easily (IE11+), it encapsulates the element and helps to keep the markup clean:


<button data-button=”large primary”>Button</button>

Much better looking. Also, since the data-attribute is not as specific as a class or ID, you have flexibility and can still customize your styles for different modules or pages within your application.


.secondary {
    border: 1px solid DarkBlue;
}


<button data-button=”large primary” class=”secondary”>Button</button>

This leaves your IDs or classes to do more important things, like deal with layout or positioning, while the visual is left to the attribute and can be easily repeatable, keeping your HTML/CSS files small.


<button data-button=”large primary” id=”login” class=”float-right”>Button</button>

Down the road when dealing with updates to the styleguide or refactors, you are able to avoid verbose CSS naming structures and can have a more fluid style guide. The possibilities are endless with this approach and in my opinion offers better control of your styles and gives developers a more semantic approach to writing their HTML and CSS.

 

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Other Articles You Will Enjoy

Why Executive Teams are Resisting Google Analytics 4 (and What You Can Do to Change Their Minds)

Why Executive Teams are Resisting Google Analytics 4 (and What You Can Do to Change Their Minds)

Few can dispute that the future of analytics will be driven by machine learning and artificial intelligence. With Google’s launch of Google Analytics 4…

InfoTrust to Lead Webinar on Analytics Maturity Using Google Marketing Platform

InfoTrust to Lead Webinar on Analytics Maturity Using Google Marketing Platform

If you’re a marketer looking to sharpen your skills, or a business owner hoping to take your organization to the next level, then look…

InfoTrust Earns Looker Partner Certification

InfoTrust Earns Looker Partner Certification

CINCINNATI — The experienced digital analytics and customer data governance consulting team at InfoTrust is proud to announce that the organization achieved partner status…

What is a Data Clean Room?

What is a Data Clean Room?

“Data clean room” is a growing buzzword in marketing, analytics, and advertising industries. Although data clean rooms aren’t an entirely new concept, they haven’t…

Which Analytics, TMS, and A/B Testing Platforms are Used by the Top 100 Digital News Outlets?

Which Analytics, TMS, and A/B Testing Platforms are Used by the Top 100 Digital News Outlets?

As the marketing technology landscape continues to grow beyond 8,000 martech solutions (up 13.6% YoY), the team at InfoTrust is taking a deep-dive look…

Talk To Us

Talk To Us

Receive Book Updates

Fill out this form to receive email announcements about Crawl, Walk, Run: Advancing Analytics Maturity with Google Marketing Platform. This includes pre-sale dates, official publishing dates, and more.

Our website uses cookies and may collect user information to provide a good experience. Read our Privacy Policy here.

Leave Us A Review

Leave a review and let us know how we’re doing. Only actual clients, please.