Какие есть неписаные правила организации верстки?

Question

[bozilly]

Интересует конкретно файловая организация, нейминг файлов.
Вот, к примеру, столкнулся с филосовской проблемой куда лучше засунуть SASS-файлы?)

В общем, нужен пример файловой организации каноничного проекта.

Comments

[dpismenny]

Философская проблема? А посмотреть как в других проектах сложно? https://github.com/automattic/_s https://github.com/twbs/bootstrap-sass https://github.com/roots/sage

Answer 1

[Денис Инешин]

Как то так

тут исходники
src
- sass
--- header
----- header.sass
--- footer
----- footer.sass
--- body
----- body.sass
--- style.sass
- js
--- jssrc

тут сгенерированные файлы
target
- style.css
- app.js

Answer 2

[Павел Волынцев]

Базовые принципы вёрстки
copist.ru/blog/2015/08/29/web-layout-basics

Answer 3

[GoodProject]

Sass можно закинуть в папку CSS, либо в Css создать папку Sass

А так должно быть так:

/img - все изображения
/css - тут файлы с оформлением
/libs - тут плагины js (слайдеры, анимашки, бутстрап, и т.д)
/js - сюда можно положить js файл где будут указаны параметры этих самых плагинов (common.js)

Лично у меня Sass лежат в папке CSS ибо Koala почему то дублирует файлы там где находятся файлы Sass и туда куда я указал компиляцию т.е в /css, получается каша, поэтому я все css, sass файлы кидаю в одну папку /css и всё нормально, но лучше конечно в CSS создать папку Sass если нету подобной проблемы. А вообще, разницы толком нету, делайте как удобно, главное что бы вы понимали что и где лежит.

А и ещё, в Brackets например при работе в Sass не заполняются ссылки на изображения, например когда пишешь в src="" - img т.е начинаешь заполнять src то редактор обычно сам предлагает пути к файлам а если sass лежит не в той же папке что и CSS то пути будут разными и писать нужно уже в ручную ибо будет уже не ../fonts/ а будет уже ../../fonts ибо папка Sass будет лежать не там куда компилируется CSS файл а внутри т.е /css/sass

Comments

[koshka-n]

Лично у меня Sass лежат в папке CSS ибо Koala почему то дублирует файлы там где находятся файлы Sass и туда куда я указал компиляцию т.е в /css, получается каша, поэтому я все css, sass файлы кидаю в одну папку /css и всё нормально, но лучше конечно в CSS создать папку Sass если нету подобной проблемы. А вообще, разницы толком нету, делайте как удобно, главное что бы вы понимали что и где лежит.
Поробуй такую структуру, мне помогло

Заметьте, я создал именно папку sass, чтобы Koala для готового .css файла создала отдельную css папку в корне проекта. Она умеет такое делать автоматически, но только когда исходная папка имеет имя sass, даже если внутри .scss файлы.

Answer 4

[Aleks Front]

Сейчас перехожу на сборщики проектов и можно так сказать, только блогадаря им наврное понял всю прелесть модульности проектов. Очень удобно полезно и т.д. Особенно когда делаешь шаблоны скажем под определную систему ( cms, сборку на фреймворке и т.д.) Перекидываешь модульные частик кода вместе с стилями, определенным html и js.

app/
-bower_components
-/less
--main.less
-/js
--main.js
-/img
--/icons
-/fonts
-/tpl
--такой подход позволяет мне перекидывать оформление различных блоков с проекта на проект.
--/header
---*.html
---*.js
---*.less
--/footer
---*.html
---*.js
---*.less
--...
--/search
---*.html
---*.js
---*.less
-index.html
-...
-inner-page.html
dev/
-тут не сжимаем картинки, не уменьшаем скрипты и т.д. Просто работаем, так как сжатие и т.д. порой замедляет процесс.
build/
-тут после окончания определенного этапа спринта и т.д. Сжатую версию кидаем на продакшен.
Такой метод наглядно отражает, куда надо зайти что бы поправить тот или иной модуль. Но думаю не каждому это подойдет, бывают специфические проекты. Там затачиваемся под проект :)

Answer 5

[sergski]

Вот — sass-guidelin.es/ru/#section-52