Topics

• CSS cascade and specificity
• CSS value processing
• CSS inheritance
• Box model review
• CSS architecture with components and BEM

Tutorials

• Section 03, videos 011 – 021 (18, 20, 21 are required tutorials to complete the update of the first week’s code with responsive units and BEM renaming of classes) Other videos are ‘theory’ on CSS and review of the box model.
• Duplicate natours/v1 before starting on this week’s tutorials. Rename the duplicate natours/v2.
• Each week you’re going to be making a duplicate of the previous version of the project and then renumbering. This week you will work through two additional versions, so that means two additional copies. Not to worry the edits to each version are minor, but represent specific learning milestones
  • 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 sets

Find a website that uses the BEM naming strategy (another list) for their classes. Within the site, chose and breakdown a particular component identifying the primary classes that are used for the component’s block name, elements, and modifiers.

Your breakdown should include the following:

• A set of screenshots which identify the block and its primary elements. I recommend you use the Chrome element inspector to help with this screenshot/identification process.
• A description of the block, element, modifier naming pattern. You do not have to list every single class in your example, just some representative ones. From the above example:
  • fc-item is the block for this particular article preview on the Guardian homepage. Above there are three examples of an fc-item block.
  • There are many elements named with fc-item__media-wrapper and fc-item__content managing the image and text of the block respectively.
  • There are a number of modifiers used to adapt the initial block. For example: fc-item--has-image, fc-item--pillar-lifestyle, and fc-item--type-feature.
• A block of code that you’ve typed that gives the nesting of the tags with classes used. You don’t have to actually style with CSS any of these classes, only show the representative portions of HTML for your component and the BEM classes. Again for the above example:

    <div class="fc-item fc-item--has-image fc-item--pillar-lifestyle fc-item--type-feature
    fc-item--standard-mobile fc-item--third-tablet">
        <div class="fc-item__container">
            <div class="fc-item__media-wrapper">
                <div class="fc-item__image-container">
                    <img src="" alt="" class="responsive-img">
                </div>
            </div>
            <div class="fc-item__content">
                <div class="fc-item__header">
                    <h3 class="fc-item__title">
                        <a href="#" class="fc-item__link">
                            <span class="fc-item__kicker">How we met/</span>
                            <span class="fc-item__headline">
                                 'He said: "We could just get married." 
                                  I said: "Oh yeah, cool."'
                            </span>
                        </a>
                    </h3>
                    <div class="fc-item_standfirst-wrapper">
                        <div class="fc-item__standfirst">Carmena Su, 47, and James Wvinner, 64, live in
                            Blenheim, New Zealand, with their seven-year-old-daughter. They both work as
                            yoga teachers, and run a film production company.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

For the blog

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

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.