A hammer in CSS

CSS by force

CSS by force might be better at breaking things than fixing things, just like a hammer. It's communication by force. It's the developer screaming at the screen, saying, "Just make it work".

Yes, there is a hammer in CSS. A hammer, in CSS, looks something like this.

#slidebar .post .meta > a.author {
    text-decoration: underline !important;
    color: #0366d6 !important;
    font-style: italic !important;
}

Example

  • In order of Specificity • Inline Style -- 0 • IDs -- 1 • Classes, attributes and pseudo classes -- 3 • Elements and pseudo elements -- 1

Most of us have seen and written CSS like this, yes you are not alone in this one. Why? Because;

Why do we write hammer CSS

Technical Problem

"It's harder to read code than to write it." Joel Spolsky

CSS is especially difficult to read. Reading CSS is hard.

The human problem

Organizations which design systems... are constrained to produce designs which are copies of the communication structure of these organizations.

Different teams write different CSS and insead of learning about the other team, we incline to write different once. Either with a good intention of improving the previous effort or due lack of patience.

How to solve the hammer problem. Write less CSS

First, CSS is render blocking resource. What that means is the browser has to have all the CSS before it can start constructing its DOM.

Breaking the cycle

• Frame the problem correctly
• Think about the developer experience
• Focus on the decision point at which developers need to add more CSS
• Reduce design fragmentation

Utility class to the rescue

Experience from Meetup. Ex. .flush--all remove padding and margin from all side of an element .flush--top remove padding and margin from the top side of an element .flush-right remove padding and margin from the right side of an element .flush-left the same thing for the let *More Examples .atMediumdisplay--inline-block .atLargemargin--center .atMedium_align--left Readable and undurstandable classes help with communication and reuse insteaad of rewrites.

Benefits of Utility Classes

  • Provides sharp small tools,
  • Rapid prototype
  • Style by memory, because it's memorable
  • Writing Less CSS!

Criticism of this method

[Content & Display Patterns with Expressive CSS] (http://johnpolacek.com/content-display-patterns/) * Too many class names * Looks like inline style tags * Level of abstraction because every class is too specific

All in all, all this issue is a communication issue. Especially communication between developers and designers. Here is a tool that could be really useful. Style Dictionary Style dictionary from Amazon transforms JSON into cross-platform styles. It also produces documentation, which is automated. Unlike a static documentation which is a lie waiting to happen.

Summary

  • Recognize humans are bad at maintaining CSS,
  • Make sure designers and engineers speak the same language,
  • Style with utility classes,
  • Automate your documentation.

Subscribe for coding videos

Keep growing professionally with just three curated videos weekly.

We hate spam as much as you do.