Phuctenberg is my attempt to write CSS for the Gutenberg editor.

Because it is really hard to overwrite CSS styles from the default Gutenberg editor with all the media queries and !important property.

Here are the rules I’ve set myself to make a create a better Gutenberg experience.

  • don’t use !important
  • easy to override (specificity)
  • looks and feels like the original or better
  • avoid mediaqueries (not always possible)
  • vertical spacing defined outside of block
  • browser compatible ’till custom properties are supported
  • avoid gap in flexbox (older browsers suck)
  • use php render to adjust html output if really necessary
  • don’t give a phuc about how it looks like at the backend, because the default gutenberg styles apply there