Attributes provide us with a high amount of flexibility that we have largely ignored. In this discussion, we'll explore how attributes may help create a more flexible, maintainable, and intentional way of building stylesheets.
23. @JCutrell
@DeveloperTea
@whiteboardis
What’s the problem with classes?
3. Often constructed with redundant strings
4. Ambiguity of intention, requiring extra
supporting documentation
5. Often abused and overridden in semantically
confusing ways
30. @JCutrell
@DeveloperTea
@whiteboardis
Would you do this?
<script>
counter = 0;
main = $("main");
styles = {
color: "blue"
}
</script>
<script>
counter = "nope."
main = $(".not-the-main");
</script>
<script>
// now what if I depend on "counter" here,
and expect it to be 0?
counter++; // NaN
</script>
31. @JCutrell
@DeveloperTea
@whiteboardis
<script>
counter = 0;
main = $("main");
styles = {
color: "blue"
}
</script>
<script>
counter = "nope."
main = $(".not-the-main");
</script>
<script>
// now what if I depend on "counter" here,
and expect it to be 0?
counter++; // NaN
</script>
Would you do this?
32. @JCutrell
@DeveloperTea
@whiteboardis
Would you do this?
<script>
(function(){
// Scope. It's not just a mouthwash.
var counter = 0;
var main = $("main");
var styles = {
color: "blue"
}
// Scope. It's not just for hunting rifles.
}());
</script>
39. @JCutrell
@DeveloperTea
@whiteboardis
This isn’t uncommon.
<div class="col-xs-4 col-xs-offset-6 col-sm-6
col-sm-offset-3 clearfix pad-top article-
content article-content-template-php center-
text font-serif white-bg no-headline">
<!-- what is happening to our brains -->
</div>
Can’t we do better?
54. @JCutrell
@DeveloperTea
@whiteboardis
‣ More powerful selection matchers
The Good
~=^=$=
Ends with Space-separatedStarts with
<div whizbang="foosball soccer"></div>
[whizbang^="foo"][whizbang$="er"] [whizbang~="soccer"]
55. @JCutrell
@DeveloperTea
@whiteboardis
‣ More powerful selection matchers
The Good
Dash separated
matcher
*=|=
Contains
<div amCharacter="George-Michael Bluth Jr."></div>
[amCharacter *= "Jr."][amCharacter |= "George"]
57. @JCutrell
@DeveloperTea
@whiteboardis
‣ Separation / isolation
<div class="text-align-right text-bold text-primary
pad-top-2 offset-1 banana-stand-module bet-you-
wont-see-this"></div>
<div text-utils="align-right bold primary"
spacing="pad-top-2 offset-1"
module="banana stand"></div>
VS
The Good
58. @JCutrell
@DeveloperTea
@whiteboardis
‣ Separation / isolation
VS
The Good
<div class="text-align-right text-bold text-primary
pad-top-2 offset-1 banana-stand-module bet-you-
wont-see-this"></div>
<div text-utils="align-right bold primary"
spacing="pad-top-2 offset-1"
module="banana stand"></div>
59. @JCutrell
@DeveloperTea
@whiteboardis
The Bad
‣The real secret of software: Attributes don’t fix
the problem. Humans fix the problem.
<div module="text-piece" text-u="center red bold xl serif serif-variant-1 primary”
my-super-special-attribute="proprietary things" data-template="some-weird-template2.PHP">
Here's some stuff with lots of not-so-great attributes.
</div>
Attributes can bring new baggage
if we don’t do our jobs.
68. @JCutrell
@DeveloperTea
@whiteboardis
The most important thing I've accomplished,
other than building the compiler, is training young
people. They come to me, you know, and say, “Do
you think we can do this?” I say, “Try it.” And I
back 'em up. They need that. I keep track of them
as they get older and I stir 'em up at intervals so
they don't forget to take chances.
One last piece of wisdom
from Admiral Hopper:
70. @JCutrell
@DeveloperTea
@whiteboardis
‣ Do you see this potentially
benefitting your processes?
‣ How would you go about attribute-
driven styles in your day-to-day work?
‣ What features of attributes seem the
most compelling? The least?
Discuss: