Front-end Rails-приложений приложений, основанный на БЭМ

Front-end Rails-приложений
основанный на БЭМ
Дмитрий Карпунин, Evrone.com

Front-end Rails-приложений
 views
 helpers
 stylesheets
 images
 javascripts
 controllers
 locales

Семантическая вёрстка
<body>
<div id="header">
<ul id="main_menu">
<li class="menu_item">...</li>
...
</ul>
</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>

БЭМ — Блок, Элемент, Модификатор
<div class="b-post b-post_favorite">
<div class="b-post__author">
<div class="avatar">...</div>
...
</div>
<div class="b-post__content">
<h3 class="title">...</h3>
...
</div>
</div>

Попробуем упростить
<div class="b-post favorite">
<div class="author">
...
</div>
...
<a class="g-iconed favorite">В избранное</a>
</div>
.g-iconed {
padding-left: 20px;
background: left center no-repeat;
}
.g-iconed.favorite {
background-image: url("/images/icons/favorite.png");
}

Пользователь IE6 в шоке
<div class="b-post favorite">
<div class="author">
...
</div>
...
<a class="g-iconed favorite">В избранное</a>
</div>
.g-iconed {
padding-left: 20px;
background: left center no-repeat;
}
.g-iconed.favorite {
background-image: url("/images/icons/favorite.png");
}

Статистика IE 6-8, РФ, liveinternet.ru

IE 6-8, Европа, gs.statcounter.com

БЭМ на практике
C) .c-placeholder, .c-blue, .c-link, ...
$c-placeholder, $c-blue, $c-link, ...
G)
1) глобальные модификаторы:
.g-line, .g-inline-block, .g-font_accident, ...
g-line, inline-block, g-font_accident, ...
2) микроструктуры:
.g-iconed.user, .g-thumb.size_50x50, ...
g_thumb(@user.image.url(:medium), "50x50")
L) .l-page, .l-profile, l-users-show, ...
.l-page__footer, .l-profile__left-content, ...
@import "blocks/users/b-friends";
B) .b-post, .b-post_favorite, .b-post__author, ...
div_for(post, :class => "b-post") => #post_42

SASS
Sass::Plugin.options[:template_location] = "./app/stylesheets"
Sass::Plugin.options[:css_location] = "./public/stylesheets/compiled"
if RAILS_ENV == "production"
Sass::Plugin.options[:style] = :nested
else
Sass::Plugin.options[:style] = :expanded
Sass::Plugin.options[:debug_info] = true
end
http://sass-lang.com/
/config/environment.rb
FireSass for Firebug

Структура стилей
/app/stylesheets/
import/
*.scss
global/
*.scss
layouts/
l-*.scss
blocks/
[%C%/[%A%/]]b-*.scss

/app/stylesheets/import/
base.scss константы проекта
mixins.scss базовые миксины
@mixin g-line {
*zoom: 1;
_height: 0;
&:after {
content: " ";
display: block;
clear: both;
height: 0;
}
}
@mixin opacity($value: 0.5) {
opacity: $value;
$value: $value * 100;
filter: progid:DXImageTransform.
Microsoft.Alpha(opacity=#{$value});
}
$layout-page-width: 1000px;
$layout-side-width: 240px;
$c-black: #333333;
$c-gray: #777777;
$c-light-gray: #999999;
$c-blue: #2266aa;

/app/stylesheets/global/
reset.scss
fundamental.scss
.g-line { @include g-line;}
reserved.scss
.bold { font-weight: bold;}.placeholder {
color: $c-placeholder;}

/app/stylesheets/global/
structures.scss
@import "include/base";
.g-iconed { padding-left: 20px; background: transparent 0 0
no-repeat;}@mixin _g-iconed_type($name) { .g-iconed.#{$name}
{ background-image: url("#{$icons-path}/#{$name}.png");
}}@include _g-iconed_type(user);@include _g-
iconed_type(email);
layout.scss
all.scss

/app/views/users/show.haml
- content_for :head,
stylesheet_link_tag("compiled/layouts/l-users-
show");
/app/stylesheets/layouts/l-users-show.scss
@import "blocks/users/b-friends";
/app/stylesheets/blocks/users/b-friends.scss
.b-friends {
.title {...}
.users-list {...}
...
}
/public/javascripts/users/b-friends.js
$( function () {
var jFriends = $('.b-friends');
...
} );

Front-end Rails-приложений приложений, основанный на БЭМ

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a Front-end Rails-приложений приложений, основанный на БЭМ

Semelhante a Front-end Rails-приложений приложений, основанный на БЭМ (20)

Mais de Александр Ежов

Mais de Александр Ежов (20)

Último

Último (20)

Front-end Rails-приложений приложений, основанный на БЭМ