amp

AMP version of The Economists.

Development

Start development server

npm run start:dev

Run tests:

npm run test

Update test snapshots:

npm run test:unit:update

Styled components

Recommendations for styled components.

Naming and code organisation

Each component should have folder for it with all dependant files and sub-components.

For styled components (components able to receive styles from outside) use naming styled-[component-name].

To achieve re-usability without affecting composability wrap functional-components in styled-component to keep representation separated from data handling and logic.

If component allows custom styles for it internal parts, use styles prop, which contains list of styles for internal parts of the component. Properties in styles object, should have same names as specific parts they applied to. See story-collection-item-headline.js for example.

Use `styled`

Avoid using className on html tags, use styled(‘tag’)`your styles`. This allows to extend styles without additional code, helps structuring code inside a component, and adds semantic information to JSX code.

import styled from 'react-emotion';

const StyledLink = styled('a')`
  text-decoration: none;
  &:hover,
  &:visited {
    color: hotpink;
  }
`;

render(<StyledLink>click me</StyledLink>);

`className` as a parameter

If component does not have own styles, but can be styled from outside, use className parameter. styled can style any component as long as it accepts a className prop.

import styled from 'react-emotion';
const Basic = ({ className }) => (
	<div className={className}>Some text</div>
);

const Fancy = styled(Basic)`
	color: hotpink;
`

render(<Fancy />);

Styles in general

Avoid using cascade in your styles. Cascade has performance downsides. Applying styles directly to tags and components helps to avoid style conflicts in child/grandchild components
Avoid adding multiple classes on one node, use cx(baseStyles, className) or composition instead
if you need significantly change a look of a component, consider exporting it as a separate component (see StyledSubscribeButton/LargeSubscribeButton)

wajerrr/amp-old

amp