preferred CSS measurements

  • Started
  • Last post
  • 2 Responses
  • colin_s

    just wondering what y'all build out frameworks / stylesheets in. traditionally i've used a combination of pixels/percent for width definitions, and rem for typography, but VH/VW has me intrigued and my one experiment with it went pretty well. so

    1. is there a "right" way?
    2. what do you prefer/use primarily?
    3. what rules exist in terms of mix and match? how important is the overall consistency (aka with typography i have used VW to set a type size and letter-spacing but then used % for line-height, but that could be frowned upon for all i know)

    also chime in on anything i may have missed

  • dpi0

    1. I don't think so
    2. rem for font sizes + paddings margins mostly. vh or vw for some cases. Like if I know that I want hero area to be screen height. Still use px for some cases.
    3. Not a developer here so don't know anything about rule. I believe that you should first use what ever works for you and what you feel comfortable working. Also depending a bit about your use case. Do you work alone or with group or do open source for wider audience.
    4. Love css grid. So bunch of new things like 1fr etc there what seem to work really good with modern more artsy looking websites what always don't follow traditional 980px 12 col grid with 20px caps. A lot of freedom and easy to change for various breakpoints.

  • mekk1

    Depends on the client. Sometimes you have sites and brands where everything has to be pixel perfect, then you go with that. Sometimes you are a little more open so you can experiment with em or vw.

    I some cases, approaching things with a more modern set of toos things might break or are not supported anymore. You'll have to explain that to dummies in the worst case.

    TBH using px still gets you where you want to be. There is no groundbreaking advantage in using some fancy measurements, even less if you are unsure how they work.