Nesting

Fluffle allows you to nest styles, making your styles more structured and easier to organize. This is especially useful for grouping related styles under a single component or feature.

Basic nesting

You can define nested style objects inside a parent style.

const styles = StyleSheet.create({
  card: {
    container: {
      padding: 16,
      backgroundColor: 'white',
    },

    title: {
      fontSize: 20,
      fontWeight: 'bold',
    },
  },
});

Using nested styles

Access nested styles using dot notation.

<View style={styles.card.container}>
  <Text style={styles.card.title}>Hello</Text>
</View>

Deeper nesting

Nesting can be used multiple levels deep to organize complex components.

const styles = StyleSheet.create({
  modal: {
    wrapper: {
      padding: 16,
    },

    header: {
      title: {
        fontSize: 18,
      },
    },

    button: {
      primary: {
        backgroundColor: 'blue',
      },

      secondary: {
        backgroundColor: 'gray',
      },
    },
  },
});

Best practices

• Keep nesting shallow and meaningful.
• Group styles by component or feature.
• Avoid excessive nesting levels.

When to use nesting

Nesting is useful for organizing styles, but it shouldn’t replace clear and maintainable structure. Use it where it improves readability—not just for the sake of it.