www.webdeveloper.com
Results 1 to 3 of 3

Thread: Please help simplify this CSS

  1. #1
    Join Date
    Aug 2016
    Posts
    23

    Please help simplify this CSS

    Hello,

    I know some basic CSS, but I'm looking at some advanced CSS and I'm trying to make sense of it. I would like to know 1) how to interpret the CSS below, and 2) if I can simplify certain parts of it:

    Code:
      div {
        height: 100%;
    
        &:first-child {
          border-top-left-radius: 0.4rem;
          border-bottom-left-radius: 0.4rem;
        }
    
        &:last-child {
          border-top-right-radius: 0.4rem;
          border-bottom-right-radius: 0.4rem;
        }
    
        &[data-color="acm-cat1"] { background-color: #CCE4E7 }
        &[data-color="acm-cat2"] { background-color: #99C8D0 }
        &[data-color="acm-cat3"] { background-color: #66ADB8 }
        &[data-color="acm-cat4"] { background-color: #3391A1 }
        &[data-color="acm-cat5"] { background-color: #007689 }
        &[data-color="acm-cat6"] { background-color: #004D5A }
        &[data-color="acm-cat7"] { background-color: #003138 }
      
        // &[data-value="0"] { display: none; }
        @for $num from 1 through 100 {
          &[data-value="#{$num}"] { width: 0% + $num}
        }
      } // end .c-barChart__data
    }
    First, these styles seem to apply to divs. Next, the background-color styles seem to apply to any divs with the attribute data-color="acm-cat#". Is this right so far?

    Here's another set of styles:

    Code:
    .c-riskCatBreakdown {
      margin-left: 8.2rem; // this is 4rem margin + the spacing required for the absolute positioned labels #1, #2, #3.
    
      label { font-weight: 300; }
    
      &__labelGroup {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 250px;
    
        label {
          display: inline-block;
          font-size: 1.4rem;
          text-transform: uppercase;
          color: #7C7C7C;
          margin-right: 5px;
    
          &.acm-cat1 { &::before { background-color: #CCE4E7 } }
          &.acm-cat2 { &::before { background-color: #99C8D0 } }
          &.acm-cat3 { &::before { background-color: #66ADB8 } }
          &.acm-cat4 { &::before { background-color: #3391A1 } }
          &.acm-cat5 { &::before { background-color: #007689 } }
          &.acm-cat6 { &::before { background-color: #004D5A } }
          &.acm-cat7 { &::before { background-color: #003138 } }
    
          &::before {
            width: 1rem;
            height: 1rem;
            content: " ";
            display: inline-block;
            align-self: center;
            border-radius: 100rem;
    
            margin-right: 0.5rem;
          }
        }
      }
    }
    These styles seem to apply to any element that has the class "c-riskCatBreakdown". Next, I'm guessing the "&__labelGroup" means that the styles under this get applied to any element that has the class "c-riskCatBreakdown__labelGroup". Next, we see a bunch of styles under "label", which means they apply to all labels with the class "c-riskCatBreakdown__labelGroup". Finally, we have a set of classes named "acm-cat#" that define background-color, and these get applied to all labels with the class "c-riskCatBreakdown__labelGroup" and one of "acm-cat#". <-- Have I got this right?

    Now, my question about simplification. I want to apply the acm-cat# styles to a set of list items. I'm doing it like this:

    Code:
    .tag-list li {
        display: inline-block;
        margin-right: 5px;
        padding: 3px;
        border-radius: 5px;
        font-size: 14pt;
        color: white;
        cursor: pointer;
        height: 30px;
    
        &[data-color="acm-cat1"] { background-color: #CCE4E7 }
        &[data-color="acm-cat2"] { background-color: #99C8D0 }
        &[data-color="acm-cat3"] { background-color: #66ADB8 }
        &[data-color="acm-cat4"] { background-color: #3391A1 }
        &[data-color="acm-cat5"] { background-color: #007689 }
        &[data-color="acm-cat6"] { background-color: #004D5A }
        &[data-color="acm-cat7"] { background-color: #003138 }
    }
    I could have set the background-color of the list items as classes, as in:

    &.acm-cat# {background-color: #...}

    But herein lies the question of simplification: how would I consolidate the background styles into one place instead of three different places in the CSS? And what would be the easiest way to do this: defining background-color based on the data-color attribute of based on classes?

    I could put the background-color styles into a class on its own, but that would require some refactoring of the html and javascript, so I'd prefer (if possible) to move the background-color styles to a single common place and add a reference to them at the spots where they used to be. That way, they should still be included in the original CSS (at least at run time) and no refactoring of html or javascript should be required.

    Thanks for your help.

  2. #2
    Join Date
    Dec 2017
    Posts
    1
    gib88,

    I believe you have the interpretation correct, but in the case of simplification, I cannot assist you, as I deal more with simple CSS and more advanced JavaScript.

    Happy coding,
    CovenantFx

  3. #3
    Join Date
    Jun 2005
    Location
    Denmark
    Posts
    141
    You are pretty close. However it is not css but LESS.
    LESS is a pre-precessor that must be installed on the server, which can make it easier to write and edit css, as it allows you to nest the selectors and use variables.
    When the file, which have the extension .less, is read, the data is compiled into standard css.

    e.g.
    Code:
    div {
        &:first-child {
          border-top-left-radius: 0.4rem;
          border-bottom-left-radius: 0.4rem;
        }
    will compile into:
    Code:
        div:first-child {
          border-top-left-radius: 0.4rem;
          border-bottom-left-radius: 0.4rem;
    }
    the & tell LESS that it is an extra criteria for the parent selector.

    without the &, the data is treated as a child element.
    so
    Code:
    div {
          &.spawn {color: red;}
          .spawn {color: blue;}
       }
    will compile into:
    Code:
          div.spawn {color: red;}
          div .spawn {color: blue;}
    I also mensioned variables and will give you examples of it:
    Varialbles are declared by using @

    assume you have this css:
    Code:
    div.container { color: blue;}
    span.important { color: blue;}
    .header blockquote { color : blue; }
    p span { color : blue; }
    and you want to change the color of all the items to color:red

    in standard css you then have to change all instances of color:blue to color:red

    with LESS you can make a variable with the value red which you then can refer to.

    with LESS the above can be written as:
    Code:
    @maincolor: blue;
    div.container { color: @maincolor;}
    span.important { color: @maincolor;}
    .header blockquote { color : @maincolor;}
    p span { color : @maincolor;}
    and if you then want to change them all to be color:red
    all you have to do is change the first line @maincolor: blue; to @maincolor: red;

    LESS has its advantage when you write long complex stylesheets with a lot of nested selector, or a lot similar properties.
    But with smaller and/or simple styleshet, you won't save much work or filesize by using LESS

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13480 seconds
  • Memory Usage 2,867KB
  • Queries Executed 14 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (9)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates