Стайлгайд SASS, получается не красиво, что я делаю не так?

Question

[uam]

Здравствуйте, начал использовать сасс, один из приколов сасса во вложенности. Так вот когда я использую
эту самую вложенность, то мой файлик со стилями мягко говоря получается не очень красивым из за того, что вложенных тегов может быть много. Нужна помощь. Прилаживаю код урезанный, в неурезанном стиле все еще печальней. В самом конце файла проблема наиболее наглядна
САМ КОД В УРЕЗАНОМ ВИДЕ

Answer 1

[Алексей Николаев]

Имхо, вложенностью вы убиваете одну из основных концепций расширяемости - увеличиваете специфичность. Такой вложенности, что у вас, в идеале вообще быть не должно (разве что в очень специфичных случаях), максимум 2, в редких случаях 3 уровня, не больше.

Также присоединюсь к комментарию Максим Антонихин - разбивайте на файлы по области их применения (хедер, формы, спец. стили для отдельной страницы и т.п.).

P.S. также большое количество вложенных селекторов увеличивают размер css в итоге, что может быть заметным.

Answer 2

[Александр Гончаров]

Увжааемый uam кроме уже упомянутого ресурса Sass Guidelines можно посмотреть ролики про методологии типа SMACSS и BEM. Я снимал около полугода назад как раз такой ролик: www.youtube.com/watch?v=vXW7w3ym8hg.

Answer 3

[Максим Антонихин]

Разбивайте на файлы. Бросается в глаза сразу head, services.

Answer 4

[XOR_AL_AL]

Ужас если честно. От scss я увидел только использование вложенности. Где хотя бы переменные, миксины? Префиксы вручную сейчас никто не пишет. Вообщем надо почитать Sass Guidelines.
Проблема со вложенностью из активного использования вложенных селекторов и каскада. Большинство популярных методологий против этого. Пример БЭМ.

Answer 5

[Pretor DH]

"Красивые стили" получаются только руками в чистом CSS.
От вложености в вашем случае только хуже.
Посмотрите на CSS в браузере после обработки - там настоящий жестяный УЖОС... Там куча длинных селеторов которые бы вы руками писать не стали.

section.bullets table tr td.date span.title {    /* должен быть селектор .bullets .date .title */
  font-size: 12px;
  text-transform: uppercase;
  color: #777;
  font-weight: normal;
  display: block;
}
section.bullets table tr td.date span {      /* как максимум .bullets .date span */
  font-family: gotham;
  font-size: 16px;
  color: #777;
  font-weight: 600;
  display: block;
}
section.bullets table tr td.fav {      /* максимум селектор .bullets .fav */
  padding-right: 40px;
}
section.bullets table tr td.fav a.btn {        /* .bullets .fav .btn */
  text-decoration: none;
  padding-top: 8px;
  -webkit-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}
section.bullets table tr td.fav a.btn:hover {    /* .bullets .fav .btn:hover */
  color: #5824dc;
  border-color: #5824dc;
  -webkit-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}

Хотите красиво - пишите на чистом CSS.
Хотите быстро писать - пишите на SASS
Но в общем случее ЭТО будет и не так!!! Нужно чётко понимать что будет после разворачивания.

Comments

[Serj-One]

Что за бред? "УЖОС" получится только если ВЫ САМИ его написали. Как говорится "плохму танцору..."

[Pretor DH]

Serj-One: А я про что?.. "Плохому танцору" что с SASS, что без - все равно "натирает"...

Но в его случае это ЖЕСТЬ...
Не читавши методологии взялся за "бензопилу"... "Топором" - читстым CSS было бы лучше.