Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SASS Structuring

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #208678
    overview
    Participant

    Hello.

    I’m wondering how people structure their SASS/Less in the following scenario:

    Say I have a partial called _type.scss where I have defined all of my typography, and I have _nav.scss where I layout my navigation.

    Now, say I want to have a different style for a and h1 in my navigation. Which partial does it make the most sense to place this code?

    Also, would you select your navigation links as nav.main a { .. } or add a class (a.main-nav { ... }). Is the first option too specific?

    #208686
    Alen
    Participant

    @overview

    If you define your general styles in _type.scss and you have a component like navigation that changes the styling of links slightly, you would make that change at component level, so in the _nav.scss partial.

    So

    // _type.scss
    h1, h2, h3, h4, h5, h6 {}
    p, ul {}
    // etc...
    
    // _nav.scss
    .navigation {}
    .navigation a {}
    .navigation ul {}
    // etc..
    
    // or possibly BEM style
    // see http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
    .navigation {}
    .navigation-item {}
    .navigation-item__link {}
    

    Regarding specificity, I usually like to give classes to my elements and avoid doing things like nav.myclass because it’s possible that other selectors like ul can be represent my menu. So you’ll have to define another ul.myclass instead just doing .myclass.

    There’s a great video about ITCSS in the discussion, really worth a watch.

    Hope that helps, Alen.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.