Как создать свой css фреймворк?

Question

[gleendo]

В общем, решил, что бы закрепить знания по css...мне нужно написать свой фреймворк. Подскажите где можно посмотреть статьи по этому поводу.

Answer 1

[Сергей Протько]

ну... тип надо почитать статьи о верстке. И делайте сразу на less/sass. И как набор миксинов или что-то в этом духе. Вот тогда будет над чем подумать и что поделать. И про BEM почитайте.

Comments

[President42]

А мне вот MCSS больше симпатичен, чем BEM)

[gleendo]

Все понимаю и padding's и margin's и блочную модель, но как реализовать свою сетку не понимаю. Как там все должно рассчитываться и т.д.
Собираюсь писать на sass, так как недавно начал ее изучать и чтобы все знания укрепить и по css и по sass, решил вот написать свой фреймворк.

[Сергей Протько]

con_: нарисуйте на бумажке и посчитайте.

[Сергей Протько]

President42: ну на вкус и цвет. Я не говорю о том что следует слепо использовать ту или иную методологию, просто идея в БЭМ сформулирована наиболее понятным образом. MCSS базируется на части этих идей... но мне как-то не нравится такой подход, пробовал. Если из MCSS выкинуть все что мне не нравится, получается... БЭМ.

Answer 2

[chupok]

Обратите внимание на БЭМ: посмотрите файловую структуру, правила именования блоков. Далее ознакомьтесь с очень интересной библиотекой компонентов: смотрите примеры компонентов, их код.

Посмотрите еще видео о редакторе БЭМ-проектов. Возможно, вам захочется реализовать подобный интерфейс.

Кстати, ответ на ваш вопрос можете также найти в виде доклада от гуру из самых разных контор (в основном Яндекс).

Answer 3

[Назар Мокринский]

Сначала попользуйтесь готовыми, чтобы понимать что оно такое. А потом начинайте делать то, чем пользовались. По кусочкам.

Comments

[gleendo]

Из готовых пробовал bootstrap. Но просто пользование сторонним фреймворком мне думаю не поможет написать свой собственный.

[Назар Мокринский]

con_: Тогда посмотрите исходник, там LESS правда, но принципиально он от SCSS не отличается: https://github.com/twbs/bootstrap/blob/master/less...
Пользование сторонним помогает - вы смотрите как оно должно быть, иногда вникаете в детали устройства (надеюсь, частенько), в итоге понимаете как оно устроено в целом.

Answer 4

[Дмитрий Пыткин]

Не нужно делать свой CSS фреймворк что-бы закрепить знания, просто делайте вёрстку проектов, смотрите на другие сайты, и всё у вас и так прекрасно само закрепится. Обратите внимание на Bootstrap и Foundation. Начните с использования одного из этих фреймворков в своём проекте, просматривайте код, который в них использован, гуглите непонятные свойства и решения опираясь на ключевые слова (например css menu float).