Как правильно задавать стили в css файлах? Знакомимся с методиками для CSS

Первые гуглопоиски вывели на страницы с BEM Yandex, Bootsytap, Compass, Foundation. Ссылки сохранил, а начал со статьи на Хабре. В статье дано краткое описание БЭМ •OOCSS •SMACSS •Atomic CSS •MCSS •AMCSS •FUN

smacss
Способы организации CSS-кода from habrahabr БЭМ •OOCSS •SMACSS •Atomic CSS •MCSS •AMCSS •FUN
Почему мы стали использовать препроцессор Stylus в Яндекс.Почте, а также о библиотеке, помогающей жить с IE. Блог компании Яндекс ... Выбирали между тремя вариантами: Sass, Less и Stylus. Процесс был довольно простым: мы взяли несколько имеющихся блоков, после чего попробовали переверстать их, используя каждый из препроцессоров.
compass
FoundationWe built Foundation for Sites to be the most advanced responsive front-end framework in the world
Bootstrap Foundation Pure Skeleton UIKit What CSS Frameworks Should You Use? Comparing the 5 Most Popular CSS Frameworks
bem
Основные понятия БЭМ. Блок, Элемент, Модификатор → Методология → Основные понятия

Categorizing CSS Rules There are five types of categories:¶

1.Base
2.Layout
3.Module
4.State
5.Theme

We often find ourselves mixing styles across each of these categories. If we are more aware of what we are trying to style, we can avoid the complexity that comes from intertwining these rules.

In [1]:

from IPython.display import Image

In [2]:

Image('https://habrastorage.org/files/4dc/24a/8dc/4dc24a8dc3fb4e758adf89af4f73f66c.png')

Out[2]:

Base rules are the defaults¶

They are almost exclusively single element selectors but it could include:
attribute selectors,
pseudo-class selectors,
child selectors or
sibling selectors.

Essentially, a base style says that wherever this element is on the page, it should look like this.

In [ ]:

#Examples of Base Styles
html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

Layout rules divide the page into sections. Layouts hold one or more modules together.

In [ ]:

#Prefix
l- layout- grid- 

Modules are the reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on.
Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component.

In [ ]:

#Prefix
.module-
#would be needlessly verbose. Modules just use the name of the module itself

In [ ]:

#Example classes
/* Example Module */
.example { }

/* Callout Module */
.callout { }

/* Callout Module with State */
.callout.is-collapsed { }

/* Form field module */
.field { }

/* Inline layout  */
.l-inline { }

Related elements within a module use the base name as a prefix. On this site, code examples:

In [ ]:

#use 
.exm 
#and the captions use 
.exm-caption. 

State rules are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive? They are about describing how a module or layout looks on screens that are smaller or bigger. They are also about describing how a module might look in different views like the home page or the inside page.

In [ ]:

#Prefix
is-
is-hidden or is-collapsed

Finally, Theme rules are similar to state rules in that they describe how modules or layouts might look. Most sites don’t require a layer of theming but it is good to be aware of it.

Собираем статическую страницу на БЭМ¶

Минимальные требования •Node.js 0.10+ или io.js; •Git Bash – для пользователей операционной системы Windows.

Локальная копия и настройка окружения

Для быстрого и простого создания БЭМ-проекта потребуется шаблонный репозиторий, содержащий необходимый минимум конфигурационных файлов и папок.

In [ ]:

Image('https://habrastorage.org/files/4dc/24a/8dc/4dc24a8dc3fb4e758adf89af4f73f66c.png')

Посты чуть ниже также могут вас заинтересовать