SASS

[Shift-Web]

Неудобно или очень непривычно разрабатывать. Получается ощущение сплошного говнокода, если приправить все с БЕМ и mixin'ами после лаконичного и мягкого OOCSS. Куча нагромождений и полная потеря оптимизации из-за частого синтаксиса вложенности секций заставляют подумать об производительности, хотя и комп 8 ядер i7, но ведь есть медленные Android браузеры. Не все каждый раз выкидывают старый телефон и берут новый ...

Не нравится. 

 

Кто-то использует данное? Что можете сказать?

[wwt]

мне лично нравится css синтаксис поэтому less или scss . А по-поводу производительности не понятен вопрос. Вас смущают длинные цепочки правил? Ну так какую вложенность сделаете такие и цепочки будут.

[Shift-Web]

 А по-поводу производительности не понятен вопрос. Вас смущают длинные цепочки правил? Ну так какую вложенность сделаете такие и цепочки будут.

Это неизбежно. Генерируется много говнокода ...

[Igor Schnaider]

Ну так это же зависит от того, какой вложенности вы сами придерживаетесь.

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

В любом случае, мне кажется, что вы путаете понятия. Проблема ведь не в препроцессоре. Это всего лишь инструмент. А какую методологию вы выберите: БЭМ, OOCSS или еще что, и как будете писать - это другое.

Edited November 30, 2015 by Igor Schnaider

[wwt]

Это неизбежно. Генерируется много говнокода ...

 

Да ладно?

 

вот к примеру LESS:

.item {  &:hover {    color: red;  }  >span {    color: green  }}

и итоговый CSS будет такой:

.item:hover {color: red;}.item > span {color: green;}

Где тут лишний говнокод?

 

 

И LESS и CSCC полностью поддерживает CSS синтаксис, так что можно делать вот так к примеру:

.menu > li > a {  >span {color: red;}}

А если вам не нужна большая вложенность пишите отдельными правилами:

.menu {  >li {    >a.link {      color: red;    }  }}a.link {  >span {color: green;}}

PS собственно всё просто, сколько говнокода вы напишите какую вложенность вы сделаете так на выходе и будет

[lexxcode]

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

[Shift-Web]

 

Это неизбежно. Генерируется много говнокода ...

 

Да ладно?

 

вот к примеру LESS:

.item {  &:hover {    color: red;  }  >span {    color: green  }}

и итоговый CSS будет такой:

.item:hover {color: red;}.item > span {color: green;}

Где тут лишний говнокод?

 

 

И LESS и CSCC полностью поддерживает CSS синтаксис, так что можно делать вот так к примеру:

.menu > li > a {  >span {color: red;}}

А если вам не нужна большая вложенность пишите отдельными правилами:

.menu {  >li {    >a.link {      color: red;    }  }}a.link {  >span {color: green;}}

PS собственно всё просто, сколько говнокода вы напишите какую вложенность вы сделаете так на выходе и будет

 

 

 

Применить к разным областям input: 

  .search-options {    font-size: 12px;    overflow-y: scroll;    margin-bottom: 30px;    width: 103%;    .open .search-options-group-body {      display: table !important;    }    .open .search-options-group-control {      background: #f0eeed url("../images/search/options-arrow-bottom.png") 95% 50% no-repeat !important;     }    .search-options-group {      .search-options-group-control {        background: #f0eeed url("../images/search/options-arrow-top.png") 95% 50% no-repeat;        padding: 10px 10px 20px;        margin: 0 0 10px;        width: 98%;        border-radius: 4px;      }      .search-options-group-body {        padding: 15px 10px 15px 20px;        display: table;        display: none;        label {          width: 100%;        }      }      input[type="checkbox"] {        opacity: 0;      }      input[type="checkbox"]:not(checked) + label,      input[type="checkbox"]:checked + label {        position: relative;        font-weight: normal;        width: 90%;        display: block;        float: left;        cursor: pointer;        line-height: 16px;      }      input[type="checkbox"] + label:before {        display: block;        float: left;        content: "";        width: 27px;        height: 27px;        margin-right: 15px;        background: transparent url("../images/search/check-unch.png") 0 0 no-repeat !important;      }      input[type="checkbox"]:checked + label:before {        background: transparent url("../images/search/check-ch.png") 0 0 no-repeat !important;      }    }  }

Меня высадило. Приходится выцарапывать и делать из этого OOCSS что и требовалось доказать ибо оптимизации никакой. Получается, я с вами согласен, обычный CSS, но пишется то с учетом всей вложенности и стает дико неудобным мультиплицирование применения.

 

p.s.: если еще &:checked написать - вообще красота будет

Edited November 30, 2015 by Shift-Web

[lexxcode]

.search-options это твой пример, который вызывает трудности?

[Igor Schnaider]

А зачем вы вообще так их вкладываете друг в друга?

Используйте родительский селектор (&).

 

+ link

Edited November 30, 2015 by Igor Schnaider

[lexxcode]

Я бы написал как-то так:

 

.search {    $root: &;    &-options {        font-size: 12px;        overflow-y: scroll;        margin-bottom: 30px;        width: 103%;        &-group {            &-body {                padding: 15px 10px 15px 20px;                display: table;                display: none;                label {                    width: 100%;                }            }            &-control {                background: #f0eeed url("../images/search/options-arrow-top.png") 95% 50% no-repeat;                padding: 10px 10px 20px;                margin: 0 0 10px;                width: 98%;                border-radius: 4px;            }            input[type="checkbox"] {                opacity: 0;                + label {                    position: relative;                    font-weight: normal;                    width: 90%;                    display: block;                    float: left;                    cursor: pointer;                    line-height: 16px;                    &:before {                        display: block;                        float: left;                        content: "";                        width: 27px;                        height: 27px;                        margin-right: 15px;                        background: transparent url("../images/search/check-unch.png") 0 0 no-repeat;                    }                }                &:checked {                    + label {                        &:before {                            background: transparent url("../images/search/check-ch.png") 0 0 no-repeat;                        }                    }                }            }        }    }    &.open {        #{$root} {            &-options {                &-group {                    &-body {                        display: table;                    }                    &-control {                        background: #f0eeed url("../images/search/options-arrow-bottom.png") 95% 50% no-repeat;                    }                }            }        }    }}

 

На выходе так:

 

.search-options {    font-size: 12px;    overflow-y: scroll;    margin-bottom: 30px;    width: 103%;}.search-options-group-body {    padding: 15px 10px 15px 20px;    display: table;    display: none;}.search-options-group-body label {    width: 100%;}.search-options-group-control {    background: #f0eeed url("../images/search/options-arrow-top.png") 95% 50% no-repeat;    padding: 10px 10px 20px;    margin: 0 0 10px;    width: 98%;    border-radius: 4px;}.search-options-group input[type="checkbox"] {    opacity: 0;}.search-options-group input[type="checkbox"] + label {    position: relative;    font-weight: normal;    width: 90%;    display: block;    float: left;    cursor: pointer;    line-height: 16px;}.search-options-group input[type="checkbox"] + label:before {    display: block;    float: left;    content: "";    width: 27px;    height: 27px;    margin-right: 15px;    background: transparent url("../images/search/check-unch.png") 0 0 no-repeat;}.search-options-group input[type="checkbox"]:checked + label:before {    background: transparent url("../images/search/check-ch.png") 0 0 no-repeat;}.search.open .search-options-group-body {    display: table;}.search.open .search-options-group-control {    background: #f0eeed url("../images/search/options-arrow-bottom.png") 95% 50% no-repeat;} 

 

Особо вложенностей не осталось. А если еще вникнуть что это за модуль, там 100% можно больше оптимизировать все

[Shift-Web]

Я бы написал как-то так:

 

.search {    $root: &;    &-options {        font-size: 12px;        overflow-y: scroll;        margin-bottom: 30px;        width: 103%;        &-group {            &-body {                padding: 15px 10px 15px 20px;                display: table;                display: none;                label {                    width: 100%;                }            }            &-control {                background: #f0eeed url("../images/search/options-arrow-top.png") 95% 50% no-repeat;                padding: 10px 10px 20px;                margin: 0 0 10px;                width: 98%;                border-radius: 4px;            }            input[type="checkbox"] {                opacity: 0;                + label {                    position: relative;                    font-weight: normal;                    width: 90%;                    display: block;                    float: left;                    cursor: pointer;                    line-height: 16px;                    &:before {                        display: block;                        float: left;                        content: "";                        width: 27px;                        height: 27px;                        margin-right: 15px;                        background: transparent url("../images/search/check-unch.png") 0 0 no-repeat;                    }                }                &:checked {                    + label {                        &:before {                            background: transparent url("../images/search/check-ch.png") 0 0 no-repeat;                        }                    }                }            }        }    }    &.open {        #{$root} {            &-options {                &-group {                    &-body {                        display: table;                    }                    &-control {                        background: #f0eeed url("../images/search/options-arrow-bottom.png") 95% 50% no-repeat;                    }                }            }        }    }}

 

На выходе так:

 

.search-options {    font-size: 12px;    overflow-y: scroll;    margin-bottom: 30px;    width: 103%;}.search-options-group-body {    padding: 15px 10px 15px 20px;    display: table;    display: none;}.search-options-group-body label {    width: 100%;}.search-options-group-control {    background: #f0eeed url("../images/search/options-arrow-top.png") 95% 50% no-repeat;    padding: 10px 10px 20px;    margin: 0 0 10px;    width: 98%;    border-radius: 4px;}.search-options-group input[type="checkbox"] {    opacity: 0;}.search-options-group input[type="checkbox"] + label {    position: relative;    font-weight: normal;    width: 90%;    display: block;    float: left;    cursor: pointer;    line-height: 16px;}.search-options-group input[type="checkbox"] + label:before {    display: block;    float: left;    content: "";    width: 27px;    height: 27px;    margin-right: 15px;    background: transparent url("../images/search/check-unch.png") 0 0 no-repeat;}.search-options-group input[type="checkbox"]:checked + label:before {    background: transparent url("../images/search/check-ch.png") 0 0 no-repeat;}.search.open .search-options-group-body {    display: table;}.search.open .search-options-group-control {    background: #f0eeed url("../images/search/options-arrow-bottom.png") 95% 50% no-repeat;} 

 

Особо вложенностей не осталось. А если еще вникнуть что это за модуль, там 100% можно больше оптимизировать все

 

Привыкнуть не могу до сих пор

[wwt]

Привыкнуть не могу до сих пор

 

Можете БЭМ методологию использовать, там в итоговом CSS вложенности вообще практически не будет так же как в примере у alexriz, но при этом будет структурировано все:

 

Как пример:

 

html

<div class="header">  <div class="header__logotype">Logotype</div>  <div class="header__page-title">Title</div>  <div class="header__phone phone">    <span class="phone__code">+7 800</span>000 00 00  </div></div>

less или scss

.header {  height: 50px;  overflow: hidden;  &__logotype {    width: 30%;    float: left;  }  &__page-title {    color: red;    width: 40%;    float: left;  }  &__phone {    width: 30%;    float: left;  }}.phone {  color: #333;  &__code {    color: red;    font-size: .8em;    padding: 0 5px;  }}

и собственно итоговый CSS будет вот такой:

.header {  height: 50px;  overflow: hidden;}.header__logotype {  width: 30%;  float: left;}.header__page-title {  color: red;  width: 40%;  float: left;}.header__phone {  width: 30%;  float: left;}.phone {  color: #333;}.phone__code {  color: red;  font-size: .8em;  padding: 0 5px;}

подробнее вот тут https://ru.bem.info