CSS architecture (for Drupal 8) says:

Never apply widths or heights except to elements that natively have these properties (e.g. images).

I use CSS properties like width:100% often with images. It seems much easier to get to than the markup most of the time. Does this guideline mean I should not being doing this? If so, is the only solution overriding a template file to get at the HTML element properties?

  • 2
    There are two good answers below, so I will just leave a comment. I think that doc is misleading. IIRC, width/height are only on HTML "replaced elements", and that line should be a bit more specific and mention that, which would clear things up. – mpdonadio Aug 19 '16 at 0:34
  • 1
    @mpdonadio what does the IIRC in your comment stand for? After doing some research I found IIRC could stand for many different things which makes your comment a bit ironic. – No Sssweat Aug 19 '16 at 0:53
  • 2
    @NoSssweat IIRC == If I Recall Correctly – mpdonadio Aug 19 '16 at 1:07

What I understand is, it is suggesting opposite to what you are interpreting.

Lets take a look again.

Never apply widths or heights except to elements that natively have these properties (e.g. images).

So, it is saying that, you can apply the height and width to image freely as the Height and Width are the default property of images. This you can understand as all images has some width and some height. So they are intrinsic property of image.

Now, lets take other proof, why you can apply Height and Width to image. If you see the Drupal's core feature, Image Style at Admin/Config/Media/Image style, there you can specifiy as many image style as you want with different Width and Height.

enter image description here

Hence this feature allowing the facility to change the dimensions of same image with different Image styles - AND how this is happening, simply by changing the height and width, So this is the core feature.

Hence, image comes in the category of except in your highlighter following statement.

Never apply widths or heights except to elements that natively have these properties (e.g. images).

So, you can freely use width and height to Images.

  • Ha! Brilliant. Thank you for the additional justification as well. – chrisshattuck Aug 18 '16 at 17:49
  • To be fair, the wording could be better. – Insane Aug 19 '16 at 0:28
  • @CodeNext Just that I understood how the OP misunderstood it. – Insane Aug 19 '16 at 13:21
  • 1
    @Insane, I updated the docs to make this particular line more clear. – chrisshattuck Aug 19 '16 at 15:15
  • @Insane and chrisshattuck Glad it is done. Thanks @Insane to point out. @Insane The improvement and constructive comment is always welcomed, and it is encouraged. But just to point out, if you comment under any particular answer, It primarily targets that answer. Hence reading your comment "To be fair, the wording could be better." I started finding what is wrong in my the answer and I started searching the word...;). Hence if you would have added that comment, under main question, it would have make more sense. Again this also became a case like chrisshattuck's question....Hahaa... – CodeNext Aug 19 '16 at 16:33

Do note that those guidelines apply to

Drupal core and contributed modules

(emphasis mine).

They don't apply to themes.

The point of the document is to make sure that CSS implemented by module developers isn't awkward for themes to override.

The decisions you make in your own theme are your call. So if you want to apply widths to images, apply away.

Incidentally, the CSS formatting guidelines are intended for themers, so they're worth a read. Even those examples use widths in selectors that are unlikely to refer to images, so you can safely assume the other guidelines don't apply here.

Heck, if they did, we wouldn't be able to create responsive themes.

  • Nice information indeed, Knowledgeable.. – CodeNext Aug 18 '16 at 22:03

You must use width and height proterties.

The main reason is than after load the html, your browser will render the page but the images are not there.

If you use size properties, the page will use the right layout because the browser knows how big are the images before they are loaded. If you don't use size properties, your page will look like a mess until images are loaded.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.