What CSS isolation methods do you know?

• Use of methodologies like BEM, OOCSS, SMACSS.
• CSS modules.
• Styled Components / Emotion.
• Shadow DOM.

Method	Description	Advantages	Disadvantages
Methodologies (BEM, OOCSS, SMACSS)	Systematization of CSS class naming to prevent conflicts.	Improve code readability, reduce collision risks in large projects.	Require team discipline, do not guarantee complete isolation.
CSS modules	Generate unique CSS class names at build time.	Automatically generate unique names, isolate styles within components.	Require build tool configuration (webpack, Parcel), may complicate debugging.
CSS-in-JS (Styled Components, Emotion)	Write CSS styles directly in JavaScript component code.	Full style isolation, dynamic styles based on props, local styles.	Can increase bundle size, require adaptation, potential performance issues in some cases.
Shadow DOM	Browser technology for creating isolated "subtrees" of DOM with its own CSS.	Provides strict style and DOM structure isolation.	Limited browser support for some features, more complex to use for simple cases.

// Example of CSS module in React  
import styles from './Button.module.css';  
function Button({ children }) {  
  return (  
    <button className={styles.button}>  
      {children}  
    </button>  
  );  
}  
export default Button;  

// Example of Styled Components  
import styled from 'styled-components';  
const StyledButton = styled.button`  
  background-color: blue;  
  color: white;  
  padding: 10px 20px;  
  border: none;  
`;  
function Button({ children }) {  
  return (  
    <StyledButton>  
      {children}  
    </StyledButton>  
  );  
}  
export default Button;