no-margin-properties.md

no-margin-properties

Discourage using margin properties for spacing; prefer defining spacing in parent elements with flex or grid using the gap property for a more resilient layout. Margins make components less reusable in other contexts.

📋 This rule is enabled in plugin:@pandacss/all.

Rule details

❌ Examples of incorrect code:

import { css } from './panda/css';

const styles = css({ marginLeft: '4' });

import { css } from './panda/css';

function App(){
  return <div className={css({ margin: '3' })} />;
};

import { Circle } from './panda/jsx';

function App(){
  return <Circle marginX="2" />;
}

✔️ Examples of correct code:

import { css } from './panda/css';

const styles = css({ display: 'flex', gap: '4' });

import { grid } from './panda/css';

function App(){
  return <div className={grid({ gap: '3' })} />;
};

import { Flex } from './panda/jsx';

function App(){
  return <Flex gap="2" />;
}

Resources

• Rule source
• Test source