CSS must be Shorthand or Longhand

Asked

Viewed 118 times

4

Fine tune which is the right practice, use CSS with Shorthand or Longhand? I looked, but I couldn’t find a definitive answer...

When we declare the class with Shorthand we are saying that all other values should be set as initial. I will demonstrate just a few situations that illustrate my interest and doubt.

A value which is not specified is set to its initial value. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

Just when we declare our BG color like this: 

div { 
     background: red;
}

We’re actually saying, or at least that’s how the browser is reading it, this:

div { 
    background-image: initial; 
    background-position-x: initial; 
    background-position-y: initial; 
    background-size: initial; 
    background-repeat-x: initial; 
    background-repeat-y: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: red; /* mas eu só queria o bg :) */
}
  • That’s good for performance?
  • It is best to declare all values individually or let Browser process all values that we are not declaring?

Possible problems with Shorthand (one more example with background)

Example of simple problem of shorthand with background making override classes defined by the default component.

.base-class { 
    height: 50px; 
    width: 100%;
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 
.base-class--modifier { 
    background: radial-gradient(...) 
}

<div class="base-class base-class--modifier"></div>

Should be used background-image: radial-gradient(...)

Today as the Emmet and software that already has autocomplit almost everything is still worth writing CSS with shortcuts? Or is it better to be more concise in style statements?

Is there any good practice? Considering performance, maintainability, milkability, etc

Reference links:

css css3
  • 1

    Why does there need to be a "right practice"? CSS offers both options, to be used as is most convenient in each case.

  • @bfavaretto am asking pq for example in the style guide of Google they encourage the use of Shorthand, whereas Mozilla seems to prefer Longhand. If to use on a website single page better the CSS shorts or***long***, or if it’s to a web application with a lot of people working on the project it’s better shorts or long? Often it’s not just up to us to choose. So I asked you if you have any more correct practice in the world of development or if each of you who put your hand does the way you want it...

  • It’s not "everyone does as they please," it has to have discretion. I’m thinking of a possible answer for you. I found Google reference on shorthand, but not the Mozilla that you say you prefer longhand. Has a link?

  • @bfavaretto Direct link on the Mozilla website: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties (attention on Tricky edge cases). CSS Guide: http://codeguide.co/#css-shorthand . I’d like to follow a pattern, but it doesn’t look like... In large projects it complicates for everyone. That’s why I was looking for a more consistent practice. But perhaps "personal taste" is the current answer although not yet the best solution.

  • It is more common sense than personal taste. Unfortunately I have no time to write a more elaborate answer. But the basic principle is to be economical. I would follow what Google says, taking care of edge cases like the ones pointed out on the Mozilla website. In fact I do not think that there they take sides for always using longhand, only point out the cases where being economic can cause problems.

  • 1

    From what I read from the first link in the question: you should use the short hand to save time and energy (maybe even gain readability). Mozilla’s people then prefer the long hand when they need a more granular control of the properties. Thicker control would be with short hand

Show 1 more comment

1 answer

1


Fine tune which is the right practice, use CSS with Shorthand or Longhand?

You replied with your link: https://assets.hongkiat.com/uploads/css-shorthand-longhand-notations/long-vs-short-notations.jpg just need to look "When to use"

That’s good for performance?

Performance in css is related to id, tag and Universal usage.

#main-navigation {   }      /* ID (O mais Rapido) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (O mais lento) */
#content [title='home']     /* Universal */

You can check this site about performance https://css-tricks.com/efficiently-rendering-css/

Is there any good practice?

Reuse css is a good practice, but the performance is 10 milliseconds longer (just an idea of time), css itself making use of Id is not reusable (unless you’re reusing it) but is faster and not reusable would be a practice.

A good practice in general, because css is so light and each company or designer has its own style of organization that it is impossible to generate a Pattern design to be followed by everyone, css runs in less than 0.1 second (much less I’m putting it out), that time can "increase" not much when making use of pseudo-class.

(EDITED) "Avoid using css inside html, pq is difficult to maintain."

And finally, finished the css manages Minify because the "biggest problem" is to load the file and not its reading.

*Sorry the lack of lifts my keyboard at the moment does not possess such keys(Turkish keyboard)

  • Hudson, thank you for your reply. In my view an image with "Pors and Contras" is an answer that sits on top of the wall, I don’t think it is a unanimous answer or that establishes any solid criteria for a team. Already about the fastest Ids are not they, in fact are the styles "in-line", follow Google’s words on this. "you may need to divide the CSS into two parts: an in-line part, responsible for setting up the part of the content above the fold, and the part that can be postponed" https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent?csw=1" [] s

  • My doubt about the performance is actually linked to what when you speak background:red you let Browser "discover" that the other background statements are empty. And when you say background-color:red you save the processing of the browser, because it does not wait to receive other values from the background Hence the question about Long or Short, especially in styles that can have many variables like BG for example.

  • on-line I quoted here: "And last but not least, the css manages Minify because the "biggest problem" is to load the file and not to read it." , id load faster than class this can be proved here http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=%23id&body=background%3A+%23CFD&ne=1000

  • Hudson the "inline" style is when it’s straight on the tag and not Minified, like <div style="background-color:red;">

  • You can generate splitting the css into two parts where the first will load "big load" and the second part the "small load" put css together with html is the worst possible practice that Voce can do.

  • Face it depends a lot, there are several libraries where each component has its HTML/CSS/JS all together in one file (single file web Component), This can depend a lot on the type and make of the project. Vue even uses this methodology a lot in the development. After a look if you are interested in shadow dom and cssom

  • I’ll take a look yes.

Show 2 more comments

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.