E
E
EA-EKB2019-07-03 07:29:22
Preprocessors
EA-EKB, 2019-07-03 07:29:22

At my job, one group of programmers is against css preprocessors. Is it time to run away from here?

Good day.
Who - what do you think about the use of css preprocessors in terms of convenience during development and subsequent support? Personally, they are much more convenient for me than pure css (structuring, variables, mixins, etc.). One group of programmers at my job spit with rage at the mention of preprocessors. From my own group, on the contrary, I demand to use them (with the separation of properties into separate files responsible for separate modules). For me, standard CSS is too bloated and chaotic. I'm interested in some statistics chtoli, how many companies use preprocessors in their work.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
W
wqertAnna, 2019-07-03
@wqertAnna

My company uses preprocessors and a component approach. Unfortunately, you also have to support projects in which styles are provided by css, but this is just an unpleasant necessity and everyone understands this.
I am in love with sass, it has a very concise syntax, which significantly speeds up the layout, and is also very easy to read, especially considering that the company has adopted BEM class naming conventions.
It seems to me that a group of people in your company who are against preprocessors do not want to force themselves to learn something new. In addition, you still have to study the assemblers.
Most of the leading companies have made their choice in favor of preprocessors, it seems to me that this should be some argument in their favor.
And yes, it's a lot harder to keep css up to par.
I just don't understand how this is possible

.header-sub-menu

    &__link
      display: block
      padding: 9px 8px 9px 18px
      color: $dark-gray
      +max-width($tablet)
        padding: 9px 20px 9px 40px
        // анимация
        opacity: 0
        transform: translateY(-25px)
        transition: transform .4s .4s, opacity .4s .4s


      &:hover
        background-color: rgba(56, 65, 79, 0.04)
        color: $dark-gray
        +max-width($tablet)
          background-color: transparent


    &__link-item
      font: bold 13px $font
      color: $dark-gray
      +max-width($tablet)
        font-size: 17px

compare in this
.header-bottom .header-sub-menu__link {
  display: block;
  padding: 9px 8px 9px 18px;
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link {
    padding: 9px 20px 9px 40px;
    opacity: 0;
    transform: translateY(-25px);
    transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
  }
}
.header-bottom .header-sub-menu__link:hover {
  background-color: rgba(56, 65, 79, 0.04);
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link:hover {
    background-color: transparent;
  }
}
.header-bottom .header-sub-menu__link-item {
  font: bold 13px "Roboto Condensed", sans-serif;
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link-item {
    font-size: 17px;
  }
}

I understand that the css I provided is compiled sass and if you initially write in css, it looks more decent, but still, it doesn’t change the picture much.

S
sim3x, 2019-07-03
@sim3x

Since you are a manager, you have nothing to run for
Insist on the use of preprocessors and do not accept code without them
Make mini-lectures on how to use them

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question