13 comments

  • Mike HeitzkeMike Heitzke, over 6 years ago

    Haven't made it through the whole series yet, just getting into the refactoring (3rd) post. I'm making an assumption (since i'm not done yet) is that your experience was very similar to my own in not really getting tachyons until sitting down and actively using it.

    Like the first time I used Sketch and it was "ugh, this is so stupid, I could have been done already in PS and this tooling doesn't make sense". First time I used tachyons I commented out a whole series of components that I didn't think I'd really use. As I continued developing I realized that I could have used more and more of it, and by the end I was utilizing almost the whole library.

    It's a worthwhile exercise to see if you like it or not. I continue to try BEM in the same fashion, but it hasn't clicked in the same way.

    2 points
    • Simon Vrachliotis, over 6 years ago

      Yep, totally right. As I started the refactoring - even if I was sold on tachyons, I still had not a good idea of how I would be using it.

      Once you start using it heavily and become fluent at it, it's a thing of beauty!

      Chapter 4 is coming soon, and is full of little tips, rabbit holes to avoid.. It should be a good one!

      1 point
  • John Z, over 6 years ago

    I've looked into atomic CSS before. I still can't wrap my head around a few things.

    1) Responsive design. How do you deal with containers that have custom sizes based on screen size? For instance, a div that has flex-basis: 30% for desktop, 50% for tablet, and 100% for mobile?

    2) States such as hover. But also, cascading states. Imagine a button inside a div.

    CSS: .button { display: none; }

    div:hover button { display: initial; }

    Both seem pretty crucial in developing rich web apps, no?

    1 point
    • Alec LomasAlec Lomas, over 6 years ago

      The goal of functional CSS isn't to completely remove custom CSS -- it's to replace the 95% of it that is spacing, typography, and coloring declarations. So to answer your question, here's how I would approach that:

      # CSS .basis-100 { flex-basis: 100%; } .dn { display: none; } @media (min-width: 30em) { .basis-50-t { flex-basis: 50%; } } @media (min-width: 60em) { .basis-30-d { flex-basis: 30%; } } .special-div:hover .special-button { display: initial; } # HTML <div class="special-div basis-100 basis-50-t basis-30-d"> <button class="special-button dn">I'm Special</button> </div>
      1 point
    • Simon Vrachliotis, over 6 years ago

      Libraries like tachyons have a mobile-first model where the helper classes are repeated with a media query suffix inside media queries, just like the example provided by Alec below.

      Hover States

      Tachyons also have hover class like:

      <button class="bg-green hover-bg-yellow">Click me!</button>

      and

      .hover-bg-yellow:hover { background-color: yellow; }

      Nested elements

      To cascade styles into nested elements (such as p / li tags coming from a CMS rich text input), you can use nested classes like this:

      <div class="nested-white nested-f6"> <p>Hello, I am CMS generated content</p> <ul> <li>here is a</li> <li>bullet list</li> </ul> </div>

      and in CSS

      .nested-white * { color: white; } .nested-f6 * { font-size: 0.85em; }

      The * selector is not the best idea, but it caters for any element you nest into the element you nest into this class.

      You can write your own CSS!

      Again - and this is something I am talking about in my upcoming chapter 4 - functional CSS doesn't block you from writing custom CSS of your own. You'll always have cases where it makes more sense to write some extra CSS.

      And when you do, you'll usually be very careful about the way you write it because you appreciate the simplicity of your CSS codebase so much..

      Hope it helps!

      1 point
  • Olivier FOlivier F, over 6 years ago

    "Functional CSS" ?? AFAIK CSS is always "functional", as in no side-effects and no state changes. (Or it never is functional if you consider the page layout as the side-effect.) In any case his solution for "functional CSS" is just breaking 1 declaration into multiple declarations, which has nothing to do with functional programming.

    Can we stop it with the buzzwords and other BS in CSS?

    Sorry I'm not usually this grumpy but this is just silly.

    0 points
    • Alec LomasAlec Lomas, over 6 years ago

      Functional CSS is just as much a buzzword as BEM, OOCSS, or SMACSS -- which is to say, it's a methodology. You might have also heard it referred to as "atomic CSS" or "immutable CSS".As a side note, it's wonderful.

      3 points
      • Olivier FOlivier F, 6 years ago

        I disagree! BEM and SMACSS are fine names for those CSS techniques because they describe the technique as concisely as possible in the acronym.

        OOCSS and "functional CSS" attempt the borrow the names of widely known and understood programming paradigms to describe mostly unrelated CSS techniques.

        0 points
    • Simon Vrachliotis, over 6 years ago

      By side effect, I mean that your traditional class is doing more than one thing, which makes it much less reusable.

      When you couple two properties with different purposes in a class, like:

      .red-button { background: red; padding: 2rem; } you're likely to never use it again unless you're creating a red button.

      When separating these 2 in 2 classes, you can use them in any element where you need some 2rem padding, or some red background.

      The concept of side-effect is that your padding declaration also has an effect on background color, and your background-color declaration also throws some padding in the mix.

      I agree with you, at the end of the day, this is just breaking 1 declaration into multiple declarations.

      But it makes each little declaration much more versatile.

      Compare it to a company team photo if you wish. If one member of the team leaves or gets fired, the company usually can't use that photo on the website anymore. It's ruined for everyone.

      If your team photo was a composition of individual member shots, you could just replace the person that left with another person and keep the team photo up there!

      1 point
  • Luca Candela, over 6 years ago

    This article could have been a paragraph. Hopefully the next one contains something useful.

    0 points
    • Andrew Welch, over 6 years ago

      I don't know... it's apparently the first article in a series, I found the background information on the company useful.

      It's instructive to see what human elements can lead to tech debt, and design conundrums, especially in a corporate environment.

      It certainly reads more like a narrative than a "how to" article, but I'm good with that. Enjoyed it.

      1 point
    • Simon Vrachliotis, over 6 years ago

      I second the comment by Andrew, I am going for the narrative. This series is as much about a personal experience and observations along the way as it is a technical one.

      Chapter 4 will contain more code examples, lessons learned and useful little tricks I found along the way.

      0 points
      • Luca Candela, over 6 years ago

        Hey, I was a bit terse there but I should have said "not useful TO ME" :)

        I fully realize the world doesn't revolve around me so keep doing what you're doing, I'll check chapter 4 when it comes out.

        0 points