Answer the question
In order to leave comments, you need to log in
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
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
.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;
}
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question