Right now, many CSS classes are re-used for various elements without much uniqueness which makes targeting specific elements to style harder and changes to classes affect many unexpected elements. Here are a few suggestions for adding classes, borrowed a bit from WordPress dev:

  • Each page should have it's own body class
    • For example, user profile should have "user-profile" class. Main page should have "homepage" or "main-feed" class. Etc.
  • Login status classes
    • If user is logged in, body class "logged-in" should be set.
  • If viewing admin panel, "admin-panel" body class set.
  • Main columns parent DIV should have classes set:
    • Left column: move main-sidebar class from aside to parent DIV of the column
      • If admin panel: admin-sidebar class added
    • Middle column: set class "main-content"
    • Right column: secondary-sidebar class set
  • Various elements should have specific classes set based on their function, not just "ui segment" or "ui card" classes re-used.
    • For example, in the right sidebar, each "segment" should have specific class based on what it is: related-articles, share-post.

This will allow for easier control over CSS customization. 

nth-child of an nth-child of an nth-child will only get you so far.