Skip to content

CSS Org Methods

Using the CSS override method is great for just quickly modifying aspect of a website's design. For this theming effort, however, CSS variables are employed in an effort to create a standardized theming system across multiple styles.

Option Comparison

css vars css override scss
no selector duplication ✅ ❌ ✅
no compiling needed ✅ ✅ ❌
functions ❌ ❌ ✅
mix-ins ❌ ❌ ✅
code minimization ✅ ❌ ↔️

👇

CSS Org Method Evaluation

CSS Variables ☑️

  • Probably the right move in many cases, especially projects with multiple themes
  • Now supported by all modern browsers
  • Zero selector duplication/DRY
    • Using vars in either CSS vars or SCSS gives ability to define the selector once! ... easier to just create one scaffolding and then just swap our colors, sizes.
    • DRY = Don't repeat yourself
  • Fastest to set up?
    • Setting up variables probably takes more time, initially, so usually fastest to just use overrides for most little css changes, like overrides in a chrome extension.
    • For larger projects and instances when there may be a light and dark theme or a desire to have multiple styles, like worth the time to invest in using variables.
  • Hybrid Flexibility
    • Can partially use vars for key elements and hard code in the rest and gradually decide which styles should be stored in vars over time without risk of breaking
    • All of CSS is flexible in allow for the use of multiple methods -- can use variables, SCSS and overrides all together but good to have a system
  • More thoughts on organization CSS variables: CSS Variable Organization

CSS Overides

  • Pros 👍
    • Possibly easier and simpler to understand and keep in your head, mentally, which may make it easier to mantain in some ways
  • Cons 🔻
    • Requires duplicating selectors for each style
    • Already implemented
    • Likely have to repeat CSS, versus standard template

SCSS Method

  • Pros 👍
    • Likely most "optimized" and powerful
    • Creating functions and mix-ins is powerful -- but also can be hard to mentally remember and keep track of
  • Cons 🔻
    • Have to compile each time
    • Possibly hardest to maintain and remember ... not as intuitive as overrides.