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');

...

} );

Вопросы? 0_O

Data & Analytics

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