В этой статье я расскажу как я использую методологию БЭМ (#b_). О методологии подробнее здесь. Возможно вы подскажите мне как улучшить или пересмотреть свои методы.
Что важно для меня:
Эти пункты помогают без боли возвращаться к проектам, переключатся между ними без кровавых глаз и поддерживать код годами.
Сейчас я расскажу какую структуру для css можно использовать, если вы разрабатывает на Ruby on Rails.
Пару фактов при которых всё это придумывалось и создавалось:
Если вы вдруг решили изучить что такое css gradient и с чем его едят, то я для вас собрал ссылки на полезный материал как на русском, так и на английском языках.
Если есть что-то полезное у вас пишите в комментариях или на почту.
Css media queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Для быстрой загрузки изображений используйте data:url
В css это делается данной конструкцией:
.class {
background: url("data:image/png;base64,you_code_here") no-repeat 0 0;
}
Вместо png впишите тот формат, который вы закодируете (gif, jpg, png).
В html это выглядит так:
<img width="10" height="10" alt="star" src="data:image/png;base64,you_code_here" />
Собственно формат записи:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
Главная причина это http запросы. С помощью данной технологии меньше запросов. Меньше запросов, значит лучше 
Используйте в поиске фразу base64 online или один из ресурсов:
Все современные браузеры поддерживают. IE начинает поддерживать с 8 версии.
Итак, давайте будем расти как верстальщики. Для качественной верстки и удобства (особенно для больших проектов) было придуманы css препроцессоры. Далее поговорим немного о них.
Давайте начнем с того, что обычный css нас многим не устраивает. А если вы считает, что все круто, то тогда не читайте дальше, а идите спать. Поэтому некоторые вещи мы делаем на javascript либо что-нибудь эдакое придумываем.
Для тех кто не знает как отцентрировать сайт, напоминаю:
1. К примеру, разметка следующая:
<body>
<div id="page-wrap">
<!-- здесь html вашего сайта -->
</div>
</body>
2. Добавим css:
#wrap {
width: 960px; /* ширина вашего сайта */
margin: 0 auto; /* выравнивание по центру отступы по бокам auto, сверху и снизу по вкусу: например, margin: 10px auto 30px; */
}
Данная анимация сделана с использованием css 3, поэтому если вы хотите более обширную поддержку браузерами, используйте gif картинки.
Html разметка очень простая:
<div class="class">
<span></span>
<span></span>
<span></span>
</div>
И css сниппет:
.class {
text-align: center;
}
.class span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.class span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.class span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
@-webkit-keyframes class {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes class {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
Результат можно посмотреть:
Если вам понадобилось сделать размытый текст с помощью css, используйте следующий сниппет:
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
Внимание! Поддерживается не всеми браузерами.
Пример:
Размытый текст
Пожалуй, лучший способ использования Helvetica или как лучше использовать шрифт Helvetica
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}