C
C
crazyjs2015-04-01 19:33:47
css
crazyjs, 2015-04-01 19:33:47

CSS optimization?

Where can I read about optimizing CSS selectors?
+ In particular, they are interested in:
1. Why is #ads_block a { ... } this selector bad?
2. Let's say I'm using the SASS preprocessor and I can use extend

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.radius_10 {
  @include border-radius(10px); 
}
.box { 
  background: #000;
  width: 100px;
  height: 100px;
  @extend .radius_10;
}

As a result, the .box selector will be added, separated by commas, to the .radius_10 selector - this will give a performance boost if you apply this approach to many selectors instead of doing @include border-radius(10px) for each one (because there is more code with include)?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrey, 2015-04-01
@crazyjs

Read this article, written simply and clearly: frontender.info/writing-efficient-css-selectors
The answer to the first question in this paragraph
Why combine selectors? You yourself answered that there would be less code.
PS: do not use such
mixins, firstly there is an autoprefixer for this,
secondly border-radius has been working without prefixes
for a hundred years PPS: You should only optimize css selectors if everything else is perfect

R
rmaksim, 2015-04-01
@rmaksim

there are a lot of articles about "what's bad"
for example clubs.ya.ru/bem/replies.xml?item_no=338
or here xiper.net/learn/css/efficient-css/efficient-css-se...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question