Simon Vrachliotis

Front-end Lead at SocietyOne Joined over 5 years ago

  • 2 stories
  • 6 comments
  • 4 upvotes
  • Posted to An Annotated webpack 4 Config for Frontend Web Development, Oct 23, 2018

    This is quite the deep dive article!

    0 points
  • Posted to Full re-write in 10 days with tachyons and functional CSS: A case study, in reply to John Z , Mar 02, 2017

    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
  • Posted to Full re-write in 10 days with tachyons and functional CSS: A case study, in reply to Luca Candela , Mar 01, 2017

    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
  • Posted to Full re-write in 10 days with tachyons and functional CSS: A case study, in reply to Olivier F , Mar 01, 2017

    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
  • Posted to Full re-write in 10 days with tachyons and functional CSS: A case study, in reply to Mike Heitzke , Mar 01, 2017

    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
  • Posted to Implementing Critical CSS on your website, in reply to Clay MacTavish , Mar 01, 2017

    hmmm, pretty sure the author considers himself a neckbeard. I don't think this should be considered as offensive or discriminative.

    5 points
Load more comments