Potential SCSS structure

SomeComponent.js

import React from 'react';

// exported to be used in .test file
export default className = 'someComponent';

const SomeComponent = () => (
	<div className={className}>
		<h1 className={`${className}__mainHeader`}>My Header</h1>
		<p className={`${className}__randomParagraph`}>
			Some very interesting text
			<span className={`${className}__randomParagraph--link`}
		</p>
	</div>
);

export default SomeComponent;

SomeComponent.scss

.someComponent {
	display: block;
	
	&__mainHeader {
		font-size: 18px;	
	}
	
	&__randomParagraph {
		font-size: 14px;
		margin: 20px;
		
		&--link {
			text-decoration: none;
			
			@tablet {
				font-size: 12px;
			}
			
			@mobile {
				font-size: 10px;
			}
		}
	}
}

Key points:
- overwriting classes is almost impossible
- breakpoints are kept next to their relevant classes (rather than at the bottom of the file), to 
  avoid endless scrolling up and down.
- Once you get over the weird syntax of &'s, underscores and dashes, it feels neat and tidy
- Totally not strict about the BE part of BEM. As long as it's descriptive (unlike 'randomParagraph') and makes
  sense it's fine. The important part is the encapsulation within the parent className ('.someComponent').