Skip to content
This repository was archived by the owner on May 4, 2019. It is now read-only.

Commit faf991e

Browse files
author
Rae Farine
committed
finishing touches
1 parent c9e5aaf commit faf991e

File tree

1 file changed

+34
-51
lines changed

1 file changed

+34
-51
lines changed

‎_posts/2015-10-12-creating-bem-stylesheets-for-react-components.markdown renamed to ‎_posts/2015-10-19-creating-bem-stylesheets-for-react-components.markdown

Lines changed: 34 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -44,50 +44,34 @@ A few things to remember:
4444

4545
The BEM methodology has been very useful within our React components. Seeing as we're already creating objects that are wholey reuseable across the site, it only seems natural to make sure that our CSS is as concise.
4646

47-
I was recently creating a new React component for our "Book a Tour" modal, called LocationCmInfo ("Cm" standing for Community Manager, the person giving the tour.)
48-
49-
50-
```js
51-
import React, {Component, PropTypes} from 'react';
52-
53-
class LocationCmInfo extends Component {
54-
render() {
55-
const { actions, selectedLocation } = this.props;
56-
57-
return (
58-
<div className="modal__content clearfix">
59-
<div className="location-cm-info">
60-
<div className="location-cm-info__content">
61-
<div className="modal__exit" onClick={actions.modalsFlush}>&#215;</div>
62-
<div className="location-cm-info__image">
63-
<img src={selectedLocation.community_manager.image_url} />
64-
</div>
65-
<div className="location-cm-info__text">
66-
<h1 className="apercu">Come visit us!</h1>
67-
<h2 className="apercu">{selectedLocation.name} - {selectedLocation.line1}</h2>
68-
<p>{selectedLocation.community_manager.name} is a Community Manager at {selectedLocation.name} and will give you a tour of the building.</p>
69-
</div>
70-
</div>
71-
</div>
72-
</div>
73-
)
74-
}
75-
}
47+
I was recently creating a new React component for our "Book a Tour" modal, called LocationInfo.
7648

77-
LocationCmInfo.propTypes = {
78-
actions: PropTypes.object.isRequired,
79-
selectedLocation: PropTypes.object.isRequired
80-
};
49+
![LocationInfo](http://res.cloudinary.com/wework/image/upload/s--GZLhgids--/fl_progressive,q_jpegmini:1/v1445109698/engineering/bem-react-locationinfo.jpg)
8150

82-
export default LocationCmInfo;
51+
52+
```html
53+
<div className="modal__content clearfix">
54+
<div className="location-info">
55+
<div className="location-info__content">
56+
<div className="location-info__image">
57+
<img src="<image url here>" />
58+
</div>
59+
<div className="location-info__text">
60+
<h1 className="apercu">Come visit us!</h1>
61+
<h2 className="apercu">42nd Street - 205 E 42nd St</h2>
62+
<p>Jacquie Dershowitz is a Community Manager at 42nd Street and will give you a tour of the building.</p>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
8367
```
8468

85-
The markup is incredibly readable and easy to comprehend. We have a block (`.location-cm-info`) that contains an element (`.location-cm-info__content`) containing 2 other elements (`.location-cm-info__image` and `.location-cm-info__text`.) There are no modifiers yet.
69+
The markup is incredibly readable and easy to comprehend. We have a block (`.location-info`) that contains an element (`.location-info__content`) containing 2 other elements (`.location-info__image` and `.location-info__text`.) There are no modifiers yet.
8670

8771
I was taking a look at this the other day and realized that **this CSS could use a little refactoring**:
8872

8973
```sass
90-
.location-cm-info {
74+
.location-info {
9175
&__content {
9276
position: relative;
9377
background-color: $syracuse;
@@ -134,20 +118,19 @@ I was taking a look at this the other day and realized that **this CSS could use
134118
}
135119
```
136120

137-
I've been breaking my own rule: "Do not use HTML elements in selectors." Let's first refactor the markup and change the stylesheet accordingly. First of all, I would like to rename this component `.location-info` and add a modifier `--with-cm` to clarify that this module can be used for more than just highlighting a Community Manager.
138-
121+
I've been breaking my own rule: "Do not use HTML elements in selectors." Let's first refactor the markup and change the stylesheet accordingly. First of all, I would like to add a modifier `--with-image` to clarify that this module can be used without an image as well.
139122

140123

141124
```html
142-
<div className="location-info--with-cm">
125+
<div className="location-info--with-image">
143126
<div className="location-info__content">
144127
<div className="location-info__image-container">
145-
<img className="location-info__image" src={selectedLocation.community_manager.image_url} />
128+
<img className="location-info__image" src="<image url here>" />
146129
</div>
147130
<div className="location-info__text-container">
148131
<h1 className="location-info__header apercu">Come visit us!</h1>
149-
<h2 className="location-info__subheader apercu">{selectedLocation.name} - {selectedLocation.line1}</h2>
150-
<p className="location-info__paragraph">{selectedLocation.community_manager.name} is a Community Manager at {selectedLocation.name} and will give you a tour of the building.</p>
132+
<h2 className="location-info__subheader apercu">42nd Street - 205 E 42nd St</h2>
133+
<p className="location-info__paragraph">Jacquie Dershowitz is a Community Manager at 42nd Street and will give you a tour of the building.</p>
151134
</div>
152135
</div>
153136
</div>
@@ -201,16 +184,16 @@ $module: 'location-info';
201184
font-size: 11px;
202185
}
203186
204-
// .location-info--with-cm
205-
&--with-cm {
206-
// .location-info--with-cm .location-info__content
187+
// .location-info--with-image
188+
&--with-image {
189+
// .location-info--with-image .location-info__content
207190
.#{$module}__content {
208191
background-color: $syracuse;
209192
@media #{$medium-up} { padding: 45px; }
210193
@media #{$small-only} { padding: 30px 25px; }
211194
}
212195
213-
// .location-info--with-cm .location-info__image-container
196+
// .location-info--with-image .location-info__image-container
214197
.#{$module}__image-container {
215198
border-radius: 50%;
216199
overflow: hidden;
@@ -227,7 +210,7 @@ $module: 'location-info';
227210
}
228211
}
229212
230-
// .location-info--with-cm .location-info__image
213+
// .location-info--with-image .location-info__image
231214
.#{$module}__image {
232215
width: 100px;
233216
height: 100px;
@@ -239,8 +222,8 @@ $module: 'location-info';
239222
###What did I change?
240223

241224
- Brought in the useful aspect of SASS that allows us to define and interpolate variables (by using: `$module: 'location-info'`). (see an example of this implementation in [Support for BEM modules in Sass 3.3](http://mikefowler.me/2013/10/17/support-for-bem-modules-sass-3.3/)) This came in handy when styling elements within my modifier.
242-
- Moved `.location-info__image` into the modifier `.location-info--with-cm`, **assuming** that in the future, we will not be using an image in our location-info components unless we are displaying the CM's information along with it. Who knows, maybe we *will* want to refactor this in the future, to allow for other types of images to be displayed in our location-info components. But that would just be a simple addition of `.location-info .location-info_image-container` with its own properties. And best of all, that **won't affect** the styles for location-info components with the class `.location-info--with-cm`.
243-
- Moved specific styles for `.location-info__content` to nest under `.location-info--with-cm`, as I doubt that these styles will be used for full-width page view of a LocationInfo component without a CM image. (ie. We probably won't want a gray (`$syracuse`) background when we use LocationInfo without the CM image.)
225+
- Moved `.location-info__image` into the modifier `.location-info--with-image`, **assuming** that in the future, we will not be using an image in our location-info components.
226+
- Moved specific styles for `.location-info__content` to nest under `.location-info--with-image`, as I doubt that these styles will be used for full-width page view of a LocationInfo component without an image. (ie. We probably won't want a gray (`$syracuse`) background when we use LocationInfo without the image.)
244227
- Added `.location-info__text-container`, `.location-info__header`, `.location-info__subheader`, and `.location-info__paragraph`.
245228

246229

@@ -252,8 +235,8 @@ Immediately, my CSS is more readable, not relying on HTML elements, and context-
252235
<div className="location-info__content">
253236
<div className="location-info__text-container">
254237
<h1 className="location-info__header apercu">Come visit us!</h1>
255-
<h2 className="location-info__subheader apercu">{selectedLocation.name} - {selectedLocation.line1}</h2>
256-
<p className="location-info__paragraph">{selectedLocation.name} is a great place to work. We have amenities such as {selectedLocation.amenities}.</p>
238+
<h2 className="location-info__subheader apercu">42nd Street - 205 E 42nd St</h2>
239+
<p className="location-info__paragraph">42nd Street is a great place to work. We have amenities such as community managers, high speed internet, and printing services.</p>
257240
</div>
258241
</div>
259242
</div>

0 commit comments

Comments
 (0)