The subject pretty much says it. I've got a large software application using web technology with a large css file and some in element styles (yea I know). I guess I'm hoping for a formula or algorithm so I can write a little app that will convert all the px values to em or rem, based on px value. Also, what css properties should I exclude?
Assume it was designed for normal users where 16px == 1rem. All you need to do then is divide by 16. Just beware that for users like myself, 1REM could be 20px, 24px, 32px or almost anything else. So for such users everything you declare in REM will be bigger. Which is the point. 16px doesn't scale, EM/REM does. But usually if some fool -- like PSD jockey artists under the delusion they're designers -- worked in PX it's because they don't know that PX doesn't scale and is inaccessible crap, and have only ever worked on computers where 1REM is always 16px. Divide by 16 using REM and you should be good to go in all but the rarest of corner cases, with everything scaling up or down as appropriate for the target audience of EM/REM.
Seeing you were the one who convinced me to convert I was hoping you'd respond I had kind of resolved to do exactly as you suggested so now I feel safe with it. Thanks for your help.
While a single formula or automated script might seem ideal, converting a large site from pixels (px) to ems or rems (especially for a legacy codebase) is a more nuanced process. Here's a breakdown of the approach and some limitations to consider: Challenges with Automation: Context Matters: The appropriate conversion (em vs rem) depends on the context within the CSS. Elements nested within elements with font size changes might require em units for proper scaling. Specificity Issues: Simply replacing px values might lead to specificity conflicts in your CSS. A higher specificity rule with px might override a lower specificity rule with em/rem. Specificity and In-element Styles: In-element styles (not recommended, but often present in legacy code) might need manual adjustment after conversion. Recommended Approach: Gradual Conversion: It's safer to tackle the conversion in stages. Focus on converting styles from a specific section of your application at a time. Identify Base Font Size: Locate the base font size declaration in your CSS. This is crucial for calculating em/rem values. If not explicitly defined, it's usually 16px by default. Prioritize Conversion: Focus on converting frequently used styles and those affecting the overall layout. Manual Conversion: For most cases, manual conversion is preferred for better control. Use the following conversion formula: rem value = px value / base font size (in px) (Consider using rems for more global font size control) em value = px value / base font size (in px) Specificity Review: After converting a section, review your CSS for specificity conflicts. You might need to adjust the specificity of some rules using selectors with higher precedence. Testing: Thorough testing throughout the conversion process is essential. Use browser developer tools and test on different devices and screen sizes. Properties to Exclude: Properties already using relative units (em, rem, %, vh, vw): No conversion needed. Border properties (border-width, border-radius): These often work well with pixels for crisp borders. Background properties (background-size, background-position): Pixels are often suitable for these properties. Font properties (font-size): This should already be in desired units (em or rem for most cases). Properties defining specific dimensions (width, height, padding, margin): Pixels often provide more control for layout, but consider converting for better responsiveness if needed. Consider using a CSS preprocessor like Sass or Less for easier management of variables (like base font size) and mixins for font styles. Use a linter or code formatter to help maintain consistent formatting and potentially identify potential issues during conversion.