current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Drupal Answers is a question and answer site for Drupal developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 5 down vote favorite
1

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?

share|improve this question
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♦ yesterday
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 yesterday
2  
@NoSssweat IIRC == If I Recall Correctly – mpdonadio♦ yesterday
up vote 5 down vote accepted

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.

share|improve this answer
    
Ha! Brilliant. Thank you for the additional justification as well. – chrisshattuck yesterday
    
To be fair, the wording could be better. – Insane yesterday
    
@Insane Could you please elaborate, Thanks. – CodeNext yesterday
    
@CodeNext Just that I understood how the OP misunderstood it. – Insane 23 hours ago
1  
@Insane, I updated the docs to make this particular line more clear. – chrisshattuck 21 hours ago
up vote 5 down vote

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.

share|improve this answer
    
Nice information indeed, Knowledgeable.. – CodeNext yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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