Natours BEM renaming and rem units

There are certain CSS properties applied to a parent element that are “inherited” by the child elements. Name four properties that are inherited and four properties that are not inherited. Describe why you believe each is inherited or not.

  • Four properties that are not inherited are margin, padding, margin-bottom, and border.

Describe the differences between inline, block, and inline-block. Why would you want to use the inline-block value? Hint you have an example use in your Natours project.

  • Inline is the content that is laid out in lines. Margins and paddings are not taken into consideration.
  • Block are elements that are literally in blocks.
  • Inline-block is a combination of block and inline. Width and height can be set on the element.

Here are the exercises for this week:

For responsive units:

natours/v2/img

natours/v2/css/style/css

natours/v2/index.html

For BEM renaming:

natours/v3/img

natours/v3/css/style.css

natours/v3/index.html

Problem set:

This is the article that I looked at but I guess there were more articles next to it but the BEM breakdown is different, but same concept.
<body>
 <!--the guardian /coronavirus outbreak--> 
   <div class="fc-item fc-item--has-image fc-item--has sublinks-1 fc-item--pillar-news fc-item--type-article">
    <div class="fc-item__container">
        <div class="fc-item__media-wrapper">
            <div class="fc-item__image-container u-responsive-ratio">
                <picture></picture>
                <div class="fc-item__content">
                    <div class="fc-item__header">
                        <h3 class="fc-item__title">
                            <a href="#"></a>
                        </h3>
                        <div class="fc-item__standfirst-wrapper">
                            <div class="fc-item__standfirst"></div>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>   
   </div> 

</body>

These are not all of the elements but these are some because it is a lot to write.

  1. fc-item is the first thing to know which is the block (the standalone component).
  2. fc-item__container,fc-item__media-wrapper are examples of the elements that cannot standalone, which is apart of the block.
  3. fc-item--has-image is an example of a modifier which is a different version of an element and again still connected to the block.

Leave a comment

Your email address will not be published. Required fields are marked *

css.php